javascript - 如何使用 bootstrap 验证表单的字数和字母数字值

Question

$(document).ready(function() {
  $('#publish_creation').bootstrapValidator({
    message: 'This value is not valid',
    //ignore: ":hidden:not(textarea)",
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      policyta: {
        group: '.title',
        validators: {
          notEmpty: {
            message: 'Textarea cannot be empty'
          },
          stringLength: {
            max: 50,
            message: 'Maximum 50 Characters Required'
          }
regexp: {
                    regexp: /^[a-zA-Z0-9_\.]+$/,
                    message: 'The title can only consist of alphabetical, number, dot and underscore'
                }
        }
      }
    }
  });
  $('#title').wysihtml5({
    events: {
      load: function() {
        $('#title').addClass('textnothide');
      },
      change: function() {
        $('#publish_creation').bootstrapValidator('revalidateField', 'title');
      }
    }
  });
});

<link href="https://cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wysihtml5/0.3.0/wysihtml5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />



<form role="form" name="#publish_creation" action="#" method="post" enctype="multipart/form-data">

  <div class="form-group">
    <div class="title">
      <input placeholder="Title: Numb Cover" name="title" id="title" type="text">
    </div>
  </div>

  <div class="form-group">
    <select class="form-control" id="my_select" name="art_form_id">
      <option value="1">Music</option>
      <option value="2">Photography</option>
      <option value="3">Painting</option>
      <option value="4">Fashion</option>
      <option value="5">Modelling</option>
    </select>

  </div>

  <input type="submit" value="Publish" name="upload" class="btn th-btn-pri1blue">

</form>

我需要验证表单。但我收到错误。我想不通。我使用了另一个 stackoverflow 问题中的代码。 How to validate wysiwyg editor using bootstrap validation 我正在尝试使用我的表单的代码。我已经提供了该网站所需的所有链接。

Answer 1

HTML5 将为您完成所有验证工作。试试这个

    <div class="title">
    <input size="50" placeholder="Title: Numb Cover" name="title" id="title" type="text" required maxlength="50"  pattern="[a-zA-Z0-9._\s]+" title="This field can contain only alpha numeric characters..">
</div>