继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery的表单验证框架 --validate的使用

大吉大利今晚学习
关注TA
已关注
手记 265
粉丝 36
获赞 142

                          jquery 的表达验证框架--validate的使用

 

 

步骤一、引仅validate验证的validate.js文件<script tyep='text/javascript' src='jquery.validate.js'></script>

同时引进jquery文件,<script type='text/javascript' src='jquery.js'></script>

步骤二、 调用加载函数开始验证

$(document).ready(function(){

    $("formname").validate({

            //验证的规则   每一个验证规则都对应一个验证函数,用户可以自定义验证函数

            ruels:{

                username:{

                    required:true,   //必须填写

                    maxlength:12,   //字符的长度不得大于12

                    minlength:5   //字符的长度不得小于5

                }

           },

            //对应的错误的提示信息

            messages:{

                username:{

                    required:'用户名不能为空',

                    maxlength:'用户名的长度不得超过12个字符',

                    minlength:'用户名的长度不得少于5个字符'

                }

            }

    });

})

 

 

案列参见:

<html>
<head>
<title>
jquery的表单验证框架--validate
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="./css/screen.css" />
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
    $.validator.setDefaults({
 submitHandler: function() { alert("submitted!"); }
});

$(document).ready(function(){
    $("form").validate({
        rules: {
            relname:"required",
            username:{
                required: true,
                minlength: "2"
            },
            pwd:{
                required: true,
                minlength:6,
                maxlength: 12
            },
            respwd:{
                required: true,
                minlength:6,
                equalTo: "#pwd"
            },
            sex:{
                required: true
            },
            habby:{
                required: true
            },
           
            tel:{
                required: true,
                minlength:6,
                maxlength:11
            },
           
            email:{
                required: true,
                email: true
            },
           
            cart:{
                required: true,
                check: true
            }

        },
        messages:{
            relname:"真实姓名必须填",
           
            username:{
                required:'必须填写用户名',
                minlength:'用户名不得少于2个字符'
            },
            pwd:{
                required:"密码不能为空",
                minlength:'密码的长度不得小于6个字符',
                maxlength: "密码的长度不能大于12个字符"
            },
            respwd:{
                required: "重复密码不能为空",
                minlength: "重复密码不能少于6个字符",
                equalTo: '密码两次输入不一致'
            },

            sex:{
                required: "不许选择性别"
            },
           
            habby:{
                required:"必须选择一个爱好"
            },

            tel:{
                required: "电话不能为空",
                minlength: "电话格式不合法",
                maxlength: "电话的格式不合法"
            },
           
            email:{
                required: "电子邮箱不能为空",
                email: "电子邮箱的格式不合法"
            },
           
            cart:{
                required: "身份证号不能为空",
                check:"身份证不合法"
            }
        }
    });

    //增加自定义的验证的方法
    $.validator.addMethod("check",function(value,eleme,pararm){       //addMethod方法的参数,第一个参数是函数名,第二个是回调函数,第三个默认的错误提示信息,
    //回调函数的参数:第一个是节点的值,第二个是节点对象,第三个是传给函数pararm参数,也就是rules规则里的check值
       
        if(value.length<15  || value.length>18){
            return false;
        }
        return true;
       
    },"请填写身份证号!");
});
</script>
</head>
<body>
<form id="form">
    <table align="center">
        <tr>
            <td>真实姓名</td><td><input type="text" name="relname" id="relname" /></td>
        </tr>
        <tr>
            <td>账户名</td><td><input type="text" name="username" id="username" /></td>
        </tr>
        <tr>
            <td>密码</td><td><input type="password" name="pwd" id="pwd" /></td>
        </tr>
        <tr>
            <td>重复密码</td><td><input type="password" name="respwd" id="respwd" /></td>
        </tr>
        <tr>
            <td>性别</td><td>
                <input type="radio" name="sex" id="sex"/>男
                <input type="radio" name="sex" id="sex"/>女
            </td>
        </tr>
        <tr>
            <td>爱好</td><td>
            <input type="checkbox" name="habby" id="habby" value="篮球"/>篮球
            <input type="checkbox" name="habby" id="habby" value="足球"/>足球
            <input type="checkbox" name="habby" id="habby" value="乒乓球"/>乒乓球
            <input type="checkbox" name="habby" id="habby" value="象棋"/>象棋

            </td>
        </tr>
        <tr>
            <td>电话</td><td><input type="text" name="tel" id="tel" /></td>
        </tr>
        <tr>
            <td>邮箱</td><td><input type="text" name="email" id="email" /></td>

           
        </tr>
        <tr>
            <td>身份证号</td><td><input type="text" id="cart" name="cart" /></td>
        </tr>
        <tr><td colspan="2"><input type="submit" value="提交"/></td></tr>

    </table>
    </form>
</body>
</html>

 

 

//***************************************************************************/

自定义验证规则的详解

 

如何使用自定的验规则:
  * 自定义方法(验证方法的名称是af)
      /*
     * <td><input type="text" id="cart"   name="cart" /></td>
     * 增加验证方法:
     *    $.validator.addMethod("af",function(value,element,params){},"必须是一个字母,且a-f");
     *     * 第一个参数,就是添加的验证方法的名称,这时是af
     *     * 第二个参数,是一个函数function(value,element,params)
     *          * value:验证组件的值
     *          * element:验证组件的对象
     *          * params:传递的参数  默认值测试
     *     * 第三个参数,就是自定义的错误提示,这里是xxxxxxx
     */
    $.validator.addMethod("af",function(value,element,params){
  //   alert("value  "+value);
  //     alert("element "+element);
  //  alert("params "+params);
          if(value!=null){
        var len=value.length;
     if(len!=15||len!=18){
      return false;   //false 表示弹出错误信息
     }
    }
    return true;   //通过验证
   },"xxxxxx"); 
 
  * 在rules中指定这个某个域使用此校验规则
            cart:{
     required:true,
     af:"2"   //2表示默认值  对应的是验证方法的params参数
    }               
 
  *在messages中指定这个域使用此校验规则没有通过的提示信息
            cart:{
     required:"身份证号码不能为空",
     af:"输入有误"
    }  

 

 

//validate常用的验证函数

 

required: true 必输字段
remote: "check.php"  使用ajax方法调用check.php输入验证值
email: true   必须输入正确格式的电子邮箱
url: true  必须输入正确格式的网址
date: true  必须输入正确格式的日期
dateISO:true  必须输入正确格式的日期(iso) 列(2001-5-4)  1998/5/3只验证格式,不验证有效性
number: true  必须输入合法的数字(小数,负数)
digits:true 不许输入整数
creditcard:必须输入合法的信用卡号
equalTo:'#field'  输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5  输入长度最多是5的字符串(汉字算一个字符)
minlength:5输入长度至少是5的字符串
rangelength:[5,10]  输入的字符长度必须是在5到10之间
range[5.10] 输入的值必须在5到10之间
max:5输入的值不能大于5


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP