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

验证插件（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