为表单验证更加简便的validate.js

大家一定很熟悉jquery.js了,jquery使代码更加简洁。而validate.js是jquery团队开发的jquery.js的验证插件。

validate可以验证用户名，密码，确认密码。

//先写html表单

<form method="get" id="form">
            <p>
                <label for="">username:</label>
                <input type="text" name="user" id="user"/>
            </p>
            <p>
                <label for="">password:</label>
                <input type="text" name="pass" id="pass"/>
            </p>
            <p>
                <label for="">确认password:</label>
                <input type="text" name="pass1" id="pass1"/>
            </p>
            <!--<input type="submit" value="提交" id="btn"/>-->
        </form>

 

引入js文件:

 1 　　　　　　　　$(function(){
 2                 $('#form').validate({
 3                     rules:{//指的是input的name
 4                         user:{required:true,rangelength:[10,18]},//required:必填  rangelength:[10,18] 限制长度
 5                         pass:{required:true,rangelength:[10,18]},
 6                         pass1:{required:true,rangelength:[10,18],equalTo:'#pass'}
 7                         
 8                     },
 9                     messages:{
10                         user:{required:"用户名必填",rangelength:"用户名必须在10-18位之间"},
11                         pass:{required:"密码必填",rangelength:"密码必须在10-18位之间"},
12                         pass1:{required:"密码必填",rangelength:"确认密码必须在10-18位之间",equalTo:"两次密码必须一样"}
13                     },
14                     ignore:'#pass1',//忽略某个元素不校验
15                     submitHandler:function(){
16                         alert('校验全通过')
17                     },
18                     invalidHandler:function(){
19                         alert('no')
20                     },
21                     focusInvalid:true,
22                     focusCleanup:true, //获得焦点
23                     errorElement:"div",//把提示信息的父节点变成div
24                     errorClass:"wrong",//验证不通过的样式//字体变红
25                 })
26             });

 

其实还可以自动义验证规则：自定义名在调用到需要验证的那个元素里，true默认值

1 $.validator.addMethod('PostCode',function(value){
2                 　　//自定义规则名
3      var reg=/^[0-9]{6}$/;
4      return reg.test(value);
5},'必须是邮编格式的！');

 

好了，validator介绍到这里，如果有不懂的问题，请留言。谢谢

 

posted @ 2017-06-20 23:15  hi?*  阅读(183)  评论(0)  编辑  收藏  举报