jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。更重要的是他是由jQuery 团队、 jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的。具体我们可以访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
需要引入以下JS文件
<script type="text/javascript" src="https://www.jb51.net/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.validate.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/validate-methods.js"></script> <script type="text/javascript" src="https://www.jb51.net/messages_zh.min.js"></script>
validate-methods.js 为扩展的验证规则
messages_zh.js 为验证提示文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript" src="https://www.jb51.net/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.validate.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/validate-methods.js"></script> <script type="text/javascript" src="https://www.jb51.net/messages_zh.min.js"></script> </head> <body> <form action="" method=""> <div> <label>帐号：</label> <div> <input type="text"placeholder="请填写由数字、26个英文字母或者下划线组成的帐号!"> </div> </div> <div> <label>手机号码：</label> <div> <input type="text"placeholder="请输入手机号码"> </div> </div> <div> <label>邮箱：</label> <div> <input type="email"placeholder="请输入邮箱"> </div> </div> <div> <label>必填字段：</label> <div> <input type="text"placeholder="这是必填字段"> </div> </div> <div> <label>输入密码：</label> <div> <input type="password"placeholder="请输入密码"> </div> </div> <div> <label>请再次输入密码：</label> <div> <input type="password"placeholder="请再次输入密码"> </div> </div> <div> <div> <button type="submit">提交</button> </div> </div> </form> </body> <script type="text/javascript"> $("#demo").validate({ rules:{ username:{ required:true, /*默认效验规则*/ account :true, /*最短6位数，最长16位数*/ minlength:6, maxlength:16 }, tel:{ required:true, /*默认效验规则*/ number:true }, email:{ required:true, /*默认效验规则*/ email:true }, bt:{ /*默认必填*/ required:true, }, password:{ required:true, minlength:6, maxlength:16, /*密码验证*/ equalTo:"#password" }, }, /*错误提示*/ messages:{ username:{ /*错误显示的提示语*/ required:"请填写由数字、26个英文字母或者下划线组成的帐号!", minlength:"帐号最小为6位", maxlength:"帐号最大为16位", }, tel:{ required:"请填写手机号码", }, email:{ required:"请填写邮箱", }, password:{ required:"请填写密码", minlength:"密码最小为6位", maxlength:"密码最大为16位", }, }, }); /*创建自定义正则表达式语法*/ $.validator.addMethod("account",function(value,element,params){ var account = /^\w{3,20}$/; return (account.test(value)); },"请填写由数字、26个英文字母或者下划线组成的帐号!"); $.validator.addMethod("number",function(value,element,params){ var number = /^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; return (number.test(value)); },"请填写正确的手机号码!"); </script> </html>
浏览器结果：
默认校验规则
常用的正则表达式
一、校验数字的表达式
1 数字：^[0-9]*$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9]*)$
6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校验字符的表达式