知问前端——验证插件(一)

验证插件（validate.js），是一款验证常规表单数据合法性的插件。使用它，极大的解放了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验。

使用validate.js插件

官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation

最重要的文件是jquery.validate.js，还有两个可选的辅助文件：additional-methods.js（控件class方式）和message_zh.js（提示汉化）文件（实际使用，请使用min压缩版）。

第一步：引入jquery.validate.js：

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

第二步：在JS文件中执行：

$('#reg').validate();

默认验证规则

validate.js的默认验证规则的写法有两种形式：1.控件属性方式；2.JS键值对传参方式

默认规则列表

规则名	说明
required:true	必须输入字段
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期（IE6验证出错）
dateISO:true	必须输入正确格式的日期(ISO)（只验证格式，不验证有效）
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入正整数
creditcard:true	必须输入合法的信用卡号，例如：5105105105105100
equalTo:"#field"	输入值必须和#field相同
minlength:5	输入长度最小是5的字符串(汉字算一个字符)
maxlength:10	输入长度最多是10的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度介于5和10之间的字符串(汉字算一个字符)
range:[5,10]	输入值必须介于5和10之间
min:5	输入值不能小于5
max:10	输入值不能大于10
remote:"check.php"	使用ajax方法调用check.php验证输入值

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form id="reg" action="123.html">
        <p>账号：<input type="text" name="user" /></p>
        <p>邮件：<input type="text" name="email" /></p>
        <p>网址：<input type="text" name="url" /></p>
        <p>日期：<input type="text" name="date" /></p>
        <p>日期：<input type="text" name="dateISO" /></p>
        <p>数字：<input type="text" name="number" /></p>
        <p>正整数：<input type="text" name="digits" /></p>
        <p>信用卡：<input type="text" name="creditcard" /></p>
        <p>密码：<input type="text" name="pass" id="pass" /></p>
        <p>密码确认：<input type="text" name="notpass" /></p>
        <p>小于：<input type="text" name="min" /></p>
        <p>5-10之间的数字：<input type="text" name="range" /></p>
        <p>5-10位之间的字符串：<input type="text" name="rangelength" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

View Code

使用控件方式验证——必填和不得小于两位：

<input type="text" class="required" minlength="2" name="user" id="user" />

注意：默认规则里设置布尔值的，直接写到class里即可实现，如果是数字或数组区间，直接使用属性=值的方式即可。而对于错误提示，可以引入中文汉化文件，或直接替换掉即可。

使用JS对象键值对传参方式设置：

$('#reg').validate({
    rules : {
        user : {                 //只有一个规则的话，
            required : true,     //直接user : 'required',
            minlength : 2
        }
    },
    messages : {
        user : {
            required : '帐号不得为空！',
            minlength : '帐号不得小于 2 位！'
        }
    }
});

注意：由于第一种形式不能设置指定的错误提示信息。我们推荐使用第二种形式，第二种形式也避免了HTML污染。

所有规则演示：

$(function() {
    $("#reg").validate({
        rules:{
            user:{
                required:true,
                minlength:2
            },
            email:{
                //required:true,
                email:true
            },
            url:{
                url:true
            },
            date:{
                date:true //输入日期格式可为YYYY-MM-DD(2014-01-01)
            },
            dateISO:{
                dateISO:true
            },
            number:{
                number:true
            },
            digits:{
                digits:true
            },
            creditcard:{
                creditcard:true //一点鸟用都没有！要你何用！
            },
            notpass:{
                equalTo:"#pass"
            },
            min:{
                min:5
            },
            range:{
                range:[5,10]
            },
            rangelength:{
                rangelength:[5,10]
            }
        },
        messages:{
            user:{
                required:"账号不得为空！",
                minlength:"账号不得小于2位！"
            }
        }
    });
});