javascript - javascript/jquery/html 形式的多重验证

标签 javascript jquery twitter-bootstrap

我使用 bootstrap3 表单和 jquery/javascript 来验证输入。这取自here

这是我的表格的一部分:

<form id="contact-form" action="#" class="form-horizontal">
<fieldset>

<div class="form-group">
<label class="sr-only" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="name" id="name" placeholder="Your Name">
</div>
</div>

<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="email" id="email" placeholder="Email">

这是 JavaScript:

 <script>
 $(document).ready(function(){

jQuery.validator.setDefaults({
    errorClass: "help-block"
});
    $('#contact-form').validate({
    rules: {
      name: {
        minlength: 3,
        regex: "/^[A-Za-z\']*$/",
        required: true
      },
      email: {
        required: true,
        email: true
      },
      subject: {
        minlength: 2,
        required: true
      },
      message: {
        minlength: 2,
        maxlength: 400,
        required: true
      }
    },
        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        }
    });
}); // end document.ready
</script>    

必填字段和位数效果非常好。我还打算添加进一步的验证,例如,在名称字段中接受字母。我尝试过使用正则表达式,但似乎不起作用。

  1. 如何在此类 JavaScript 验证中使用正则表达式(或多个)验证?
  2. 当字段有多个验证(仅限字母和超过 3 个字符)时,如何给出适当的错误消息?

我对网络开发非常陌生,所以这些可能会出现菜鸟问题。现在刚刚接触html。请 Bootstrap 正确的方向。

最佳答案

对于电子邮件,您应该添加如下内容:

$.validator.addMethod("email", function(value, element) {
          return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
    }, "Invalid email address");

那么电子邮件的规则应该是:

email: "required email",    

关于javascript - javascript/jquery/html 形式的多重验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21571766/

相关文章:

javascript - Ajax调用成功,但有一个未定义的问题

javascript - 如何将结构从 V8 C++ 函数返回到 javascript 模块

javascript - 如何将自定义(定义的)顺序应用于 DC.js 中的行图表的行?

jQuery::动态创建菜单项

javascript - JS : How to turn this string into date object

javascript - 如何制作具有缩放所选图像和其他分散效果的图库

javascript - 选择表单选项时创建文本字符串

css - bootstrap.stage42 像 bootstrap 3 的主题?

javascript - 如何将参数从 form_for 方法传递到 Rails 中的 Controller 方法?

javascript - Bootstrap 网格系统容器/嵌套