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插件实现表单验证

默认校验规则

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验证方法汇总

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

Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
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
You might like
PHP操作数组相关函数
2011/02/03 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
申报材料格式
2014/12/30 职场文书
详解python字符串驻留技术
2021/05/21 Python
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python