编程 Javascript

jQuery Validate插件实现表单验证

Posted in Javascript onAugust 19, 2016

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。更重要的是他是由jQuery 团队、 jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的。具体我们可以访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
需要引入以下JS文件

<script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script type="text/javascript" src="validate-methods.js"></script>
 <script type="text/javascript" src="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="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script type="text/javascript" src="validate-methods.js"></script>
 <script type="text/javascript" src="messages_zh.min.js"></script>
</head>
<body>
<form action="" method="" class="" id="demo">
 <div class="">
 <label>帐号：</label>
 <div>
 <input name="username" type="text"placeholder="请填写由数字、26个英文字母或者下划线组成的帐号!">
 </div>
 </div>
 <div>
 <label>手机号码：</label>
 <div>
 <input name="tel" type="text"placeholder="请输入手机号码">
 </div>
 </div>
 <div>
 <label>邮箱：</label>
 <div>
 <input name="email" type="email"placeholder="请输入邮箱">
 </div>
 </div>
 <div>
 <label>必填字段：</label>
 <div>
 <input name="bt" type="text"placeholder="这是必填字段">
 </div>
 </div>
 <div>
 <label>输入密码：</label>
 <div>
 <input name="password" type="password"placeholder="请输入密码">
 </div>
 </div>
 <div>
 <label>请再次输入密码：</label>
 <div>
 <input name="password" 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>

浏览器结果：

jQuery Validate插件实现表单验证

默认校验规则

jQuery Validate插件实现表单验证

常用的正则表达式

一、校验数字的表达式

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)$

二、校验字符的表达式

1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式

1 Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号：
15或18位身份证：^\d{15}|\d{18}$
15位身份证：^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
18位身份证：^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 钱的输入格式：
16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
24 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]
27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)

精彩专题分享：jQuery插件validate验证方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery Validate插件实现表单验证

- Author -

qq_33712919

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 容错处理代码, 屏蔽错误信息

Mar 09 Javascript

html数组字符串拼接的最快方法

Sep 16 Javascript

contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

Sep 13 Javascript

JS仿Windows开机启动Loading进度条的方法

Feb 26 Javascript

node.js require() 源码解读

Dec 13 Javascript

BootStrap 智能表单实战系列(五) 表单依赖插件处理

Jun 13 Javascript

IntersectionObserver API 详解篇

Dec 11 Javascript

微信小程序之MaterialDesign--input组件详解

Feb 15 Javascript

jQuery Jsonp跨域模拟搜索引擎

Jun 17 jQuery

javascript中神奇的 Date对象小结

Oct 12 Javascript

Javascript的this详解

Mar 23 Javascript

Jquery高级应用Deferred对象原理及使用实例

May 28 jQuery

jQuery如何封装输入框插件

Aug 19 #Javascript

JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法

Aug 19 #Javascript

jquery easyUI中ajax异步校验用户名

Aug 19 #Javascript

js获取页面引用的css样式表中的属性值方法(推荐)

Aug 19 #Javascript

AngularJS入门教程之REST和定制服务详解

Aug 19 #Javascript

js自调用匿名函数的三种写法(推荐)

Aug 19 #Javascript

AngularJS 入门教程之事件处理器详解

Aug 19 #Javascript