jquery-validate 表单验证插件

表单验证插件 Jquey.validate.js

1、使用：需要引入jquery.js和validate.js两个文件，然后给表单进行验证、在代码中加入：

　　$("#Form").validate();

 

2、验证规则：在需要校验的元素中加上如：class=”{required：true, rangelength:[6,16]}”

【注：class="{}"的方式，需要引入包：jquery.metadata.js】

　　required  -> 必填字段

　　email  -> 正确的邮箱格式

　　url  -> 正确的url地址

　　number  -> 数字

　　equalTo:”.confirmpwd”  -> 与类名为confirmpwd的值一致

　　maxlength: 5  -> 最大长度为5

　　minlength:2  -> 最小长度为2

　　rangelength:[6,16]  -> 长度在6-16之间

　　max:6  -> 值不超过6

　　min:2  -> 值不小于2

　　range:[2,6]  -> 值在2-6之间

插件自带的验证规则类似还有digits、creditcard、accept等

除以上列举的验证规则外，插件还支持用户自定义增加验证规则，这将在第5点中详细介绍。

 

3、错误提示：插件自带有验证失败后错误信息提示，我们可以更改错误提示信息的内容和提示信息的位置。

（1）更改提示内容：

　　默认提示信息

　　 

下面这段代码的作用就是用来设置提示信息，在使用此插件时、可以改变默认提示信息，如下。

$.extend($.validator.messages, {
　　required: "必选字段",
　　remote: "请修正该字段",
　　email: "请输入正确格式的电子邮件",
　　url: "请输入合法的网址",
　　date: "请输入合法的日期",
　　dateISO: "请输入合法的日期 (ISO).",
　　number: "请输入合法的数字",
　　digits: "只能输入整数",
　　creditcard: "请输入合法的信用卡号",
　　equalTo: "请再次输入相同的值",
　　accept: "请输入拥有合法后缀名的字符串",
　　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} 的值")
});

除此之外，还可以通过class="{required:true, messages:　　{required:'此项必填'}    }"这样的方法来修改提示内容。

 

（2）更改提示信息的位置

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

　　红色部分就是目标位置，根据不同的需求来改变这里的值。

 

4、在js代码中写入校验规则　

$("#myform").validate({
　　rules:{
　　　　email:{
　　　　　　required:true,
　　　　　　email:true
　　　　},
　　　　password:{
　　　　　　required:true,
　　　　　　rangelength:[6,16]
　　　　},
　　　　confirm_password:{
　　　　　　equalTo:"#password"
　　　　}
　　},
　　messages:{
　　　　email:{
　　　　　　required:"必填",
　　　　　　email:"E-Mail格式不正确"
　　　　},
　　　　password:{
　　　　　　required: "不能为空",
　　　　　　rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
　　　　},
　　　　confirm_password:{
　　　　　　equalTo:"两次密码输入不一致"
　　　　}
　　}
});

对应表单

<form id="myform" method="post" action="">
　　<p>
　　　　<label for="email">EMail：</label>
　　　　<input id="email" name="email" />
　　</p>
　　<p>
　　　　<label for="password">密码：</label>
　　　　<input id="password" name="password" type="password" />
　　</p>
　　<p>
　　　　<label for="confirm_password">确认密码：</label>
　　　　<input id="confirm_password" name="confirm_password" type="password" />
　　</p>
　　<p>
　　　　<input class="submit" type="submit" value="立即注册" />
　　</p>
</form>

这种写法，不需要在input的class中添加繁琐的一大串规则，相比较来说整体更加清晰，所有的操作与校验都写在js中，rules给元素添加校验规则，而messages是给元素添加校验结果的提示信息。。【注：最好给input添加name和id属性，且属性值相同。】

 

5、自定义验证方法和重写校验方法：

（1）自定义验证方法：  addMethod：name, method, message

添加了自定义的校验规则后，就可以用第4点介绍的写法，对输入内容进行校验:secret 中内容必须=“buga”

 

$("#Form).validate({
　　rules: {
　　　　number: {
　　　　　　required:true,
　　　　　　minlength:3,
　　　　　　maxlength:15,
　　　　　　number:true
　　　　},
　　　　secret: "buga",
　　　　math: {
　　　　　　equal: 10 
　　　　}
　　}
});

对应表单

<form id="Form" method="get" action="">

　　<input id="number" name="number" title=" 请填写3-15个数字" />

　　<input name="secret" id="secret" title=" 请填写密码/>

　　<label for="math">5 + 5 = </label>
　　<input id="math" name="math" title="请填写答案" />

　　<input class="submit" type="submit" value="Submit"/>
</form> 

 

（2）重写：  重新定义校验规则　　

　$.validator.methods.equal = function(value, element, param) {
　　　　return value == param;
　};

 

6、其他

（1）debug模式：  只进行校验、不提交表单

 $("#Form").validate({ debug: true })

（2）忽略元素：  ignore，不验证某些元素

 $("#Form).validate({ignore: "ignore" })

（3）验证时间：（可以根据需要自行设置验证时间，下面展示的是提交时不验证 失去焦点时验证）

 $("#Form).validate({

  onsubmit: false,

  onfocusout: true

 })

（4）成功回调：  验证成功后执行的

   $("#Form).validate({

      success:function(){

        //成功后执行操作

      },

   })