首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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插件实现表单验证

默认校验规则

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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Vue.js第四天学习笔记（组件）
Dec 02 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
angular+webpack2实战例子
May 23 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
vue开发中遇到的问题总结
Apr 07 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
远程桌面(2) exists(2) Switch(1) cmd(1) Spring JPA(1) Mint UI(1) REST(1) mt-swipe(1) 相对路径 (1) 慢日志(1)
You might like
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
如何利用Fabric自动化你的任务
2016/10/20 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python shutil模块用法实例分析
2019/10/02 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
viagogo法国票务平台：演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Diamondback自行车：拥有你的冒险
2019/04/22 全球购物
豪华床上用品、床单和浴室必需品：Peacock Alley
2019/09/04 全球购物
英国户外服装、鞋类和设备的领先零售商：Millets
2020/10/12 全球购物
合同专员岗位职责
2013/12/18 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
售后服务承诺书
2014/03/26 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
销售员自我评价
2015/03/11 职场文书
莫言诺贝尔获奖感言（全文）
2015/07/31 职场文书
承诺书的签字人，需不需要承担相应的责任？
2019/07/09 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python