首页
所有分类
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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
微信小程序webSocket的使用方法
Feb 20 Javascript
js面试题之异步问题的深入理解
Sep 20 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
OOP(1) Mysql8(2) minio(1) celery(1) ACID(1) appdata(1) Outlook(1) SeaTable(1) Windows server 2003(1) 黑屏(2)
You might like
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP登录（ajax提交数据和后台校验）实例分享
2016/12/29 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python读取Word（.docx）正文信息的方法
2018/03/15 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python绘制多个曲线的折线图
2020/03/23 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
污水厂厂长岗位职责
2014/01/04 职场文书
商务日语专业自荐信
2014/04/17 职场文书
英语感谢信范文
2015/01/20 职场文书
捐款仪式主持词
2015/07/04 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
JDBC连接的六步实例代码（与mysql连接）
2021/05/12 MySQL
教你怎么用python selenium实现自动化测试
2021/05/27 Python