01.jquery插件validate应用一

一.导入js文件.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="application/javascript" src="js/jquery.validate.min.js"></script>

 二.默认校验规则.（可能用到的不包括所有的，若查看所有校验规则见API）

1.required:true　　必须输入字段

2.minlength:10      输入的最小长度为10（一个汉子为一个字符）

3.maxlength:20　　输入的最大长度为20（一个汉子为一个字符）

4.email:true  　　　输入正确格式的电子邮件

5.url:true  　　　　输入正确格式的网址

6.number:true 　　输入合法的数字（小数，负数）

7.digits:true   　　必须输入整数

8.equalTo:"#field"  输入值必须和#field一样（多用于密码确认验证）

9.rangelength:[5,10] 输入长度必须介于5和10之间

三.默认提示

这里因为是国外开发的插件，提示为英文，所以最好在用该插件的时候自己重写提示。

四.添加检验方法

$.validate.addMethod('isadu',function(value,element){
　　 var myDate=new Date();
    var year=myDate.getFullYear();
    var month=myDate.getMonth()+1;
    var day=myDate.getDate();
    month =(month<10 ? "0"+month:month);
    day =(day<10 ? "0"+day:day);
    var nowtime=year.toString()+month.toString()+day.toString();
    var ss=nowjstime?nowjstime:nowtime;
    if(isAdu(value,ss)==1){
        return false;
    }else{
        return true;
    }
},"未成年身份证号不可用");

 

 五.小case展示

reg.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate应用</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="application/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/new.js" type="text/javascript"></script>
<script src="js/adu.js" type="text/javascript"></script>
<style type="text/css">
.error{color:red;}
</style>
</head>
<body>
<form action="" name="reginfo" id="reginfo">
<fieldset>
<legend>填写注册信息</legend>
<div class="xm">
<div>用户名</div>
<div><input type="text" name="username"  /></div>
</div>
<div class="mm">
<div>密码</div>
<div><input type="password" name="pwd"  id="pwd" /></div>
</div><div class="mm">
<div>确认密码</div>
<div><input type="password" name="confirm_pwd"  /></div>
</div>
<div class="xm">
<div>备注</div>
<div><input type="text" name="bz"  /></div>
</div>
</fieldset>
</form>
</body>
</html>

new.js文件

$(function() {
    $.validator.addMethod("af", function(value, elements, params) {
        if (value.length > 1) {
            return false;
        }
        if (value >= params[0] && value <= params[1]) {
            return true;
        } else {
            return false;
        }
    }, "必须是一个字母,并且a-f");

    $("#reginfo").validate({
        rules : {
            username : {
                required : true,
                minlength : 4
            },
            pwd : {
                required : true,
                minlength : 4
            },
            confirm_pwd : {
                required : true,
                equalTo : "#pwd"
            },
            bz : {
                required : true,
                af : [ 'a', 'f' ]
            }
        },
        messages : {
            username : {
                required : "请输入用户名",
                minlength : "长度至少4个字符"
            },
            pwd : {
                required : "请输入用户密码",
                minlength : "长度至少为4个字符"
            },
            confirm_pwd : {
                required : "请输入确认密码",
                equalTo : "用户密码不一致"
            },
            bz : {
                required : "请输入备注"
            }
        }
    })

})

未完待续··

posted on 2014-03-06 13:34  老李的菜园  阅读(202)  评论(0)  编辑  收藏  举报

导航