jQuery Validate

jQuery Validate

使用jquery Validate属性进行验证表单元素时，对需要验证的元素添加id属性，保证唯一性，但是，一定要添加name属性，否则会出现只验证表单中的第一个input元素。

使用方式

1.将下载好的信息文件引入到页面。

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>

校验规则主要有两种形式，一种是直接写到控件中，一种是写在js代码中。

（1）写到控件中：

<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<input id="cname" name="name" minlength="2" type="text" required>

如果是写在了控件中的话，$("#commentForm").validate();直接拿到需要验证的表单，调用validate（），即可根据不同的控件要求进行验证。

写控件时，一定要添加name属性，我自己第一次使用时 是用的bootstrap框架的代码来写的前端，没有加name属性，导致提交表单时只验证第一个input元素，以为是其他逻辑问题，踩到坑里好久才出来。

（2）将校验规则写到 js 代码中

//表单全部校验成功后进行的操作
//拦截表单验证成功后的提交表单事件，执行完函数中的代码再提交表单。
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      //再次输入密码
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"   //和password内容相同
      },
      email: {
        required: true,
        email: true
      },
     
    },
    //可以自定义表单未通过验证时的提示信息，如果未定义则使用默认提示信息
    messages: {
      firstname: "请输入您的名字",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字符组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
     }
    })
});

required: true 值是必须的。
required: “#aa:checked” 表达式的值为真，则需要验证。
required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

默认提示信息如下：

    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")

一般，error提示信息字体为红色比较合适，可以设置一下style属性。

.error{
color:red;
}

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

使用 ajax 方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不验证

ignore: ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

一般情况下把错误信息显示在 中，如果是 radio 则显示在 中，如果是 checkbox 则显示在内容的后面。