jQuery validate插件功能与用法详解


Posted in Javascript onDecember 15, 2016

本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考,具体如下:

前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度!

1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidation.org/,官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用

(1)首先下载jquery.validate.js插件

然后在HTML文件中插入

<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/js1.js"></script>

因为jQuery插件是基于jQuery库基础之上的,因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件

(2) jQuery validate插件提供了$(form).validate(options)方法,本插件自带必填的数字,文字等验证规则

其中form表示表单元素名称,options表示调用validate方法时的配置对象,所有配置信息和异常信息显示的规则都包含在对象options中。

2.对于使用jQuery validate的方法有很多种,这里详细介绍通过表单元素名称来验证表单规则的方法。

即一种与HTML元素无直接联系,而是通过name属性来关联字段和验证规则的验证写法,这种方法可以实现行为与结构的分离。

<form id="form-sp">
 <fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
  <p class="tip"></p>
<p>
<label for="password">密 码</label>
  <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
<label for="confirm-password">再输入</label>
<input type="password" name="confirm-password"/>
</p>
<p class="tip"></p>
  <label for="verify"></label>
  <input type="button" value="确定" name="verify" id="btn-ver"/>
  </fieldset>
</form>

这对上诉的HTML文件,我们可以写成如下验证规则:

$("#form-sp").validate({
rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"请输入你的用户名",
minlength:"至少输入三位的用户名"
}
},
errorPlacement:function(error,element){
  error.appendTo(element.parent().next());
}
})

运行这段代码后,显示为

jQuery validate插件功能与用法详解

我们发现在自定义规则之后,表单自带了验证方法,下面我们来看validate对象中,具体属性的作用

(1)首先在rules属性中,我们根据表单的name,来确定各个表单元素的规则:

比如required:true

说明用户名这个表单元素,不能为空,

minlength:2,表示用户名至少为2位字符

maxlength:10,表示用户名至多为10位的字符

(2)其次在messages属性中,定义了当表单中的信息与规则不符合情况下的,错误提示信息,

如果不修改,默认为英文提示。在这里我们修改了username表单元素的required:属性的错误信息

因为在报错的时候会提示,“至少输入三位用户名

3.了解jQuery validate插件的两个基本属性rules和messages,

下面jQuery validate默认校验表单:

1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

这里对于各个校验元素就不一一分析

我们来分析来个有意思的校验元素

(1)equalTo

对于equalTo元素,使用方法为equalTo:"#filed"

在具体的使用时,只有当前的表单元素中的值与name为filed的表单元素的值相等时,返回true 不会报错,否则会报错,并显示错误提示信息,常见的应用是在注册界面验证两次输入密码是否一致,比如:

<p>
<label for="password">密 码</label>
 <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
 <label for="confirm-password">再输入</label>
 <input type="password" name="confirm-password"/>
</p>

对于这个表单,有如下验证规则:

rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},

只有当name=confirm-password的表单元素,与name=password的表单元素值相等时,才不会报错,否则会显示错误提示信息。

(2)email校验元素,用于验证邮箱的格式

如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式,若不匹配则返回false并显示错误提示信息;

jQuery validate插件功能与用法详解

4.validate的其他方法

(1)用其他方法代替默认的submit方法

submitHandler:function(form){
 form.submit();
}
submitHandler:function(form){
 form.ajaxsubmit();
}

并且可以改变validate()对象的默认submit方法:

$.validate.setDefaults({
 submitHander:function(form){
 form.submit();
 }
})

(2)debug:只验证不提交表单

如果debug:true,则表单只验证不会提交,

同样也可以改变validate()对象的默认submit方法

$.validate.setDefaults({
 debug:true;
})

(3)更改错误信息的显示位置

errorPlacement:function(error,element){
 //第一个参数为错误提示信息,第二个参数为HTML中的元素
 error.appendTo(element.parent())
 //这里也可以直接写成类名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}

errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。 errorContainer: "#messageBox1, #messageBox2"  
errorLabelContainer Selector 把错误信息统一放在一个容器里面。  
wrapper String 用什么标签再把上边的 errorELement 包起来。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 #Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 #Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 #Javascript
js代码实现下拉菜单【推荐】
Dec 15 #Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 #Javascript
JavaScript常见的五种数组去重的方式
Dec 15 #Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
浅析vue数据绑定
2017/01/17 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python面向对象实现方法总结
2020/08/12 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
struct和class的区别
2015/11/20 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
领导干部培训感言
2014/01/23 职场文书
会计个人实习计划书
2014/08/15 职场文书
2014年宣传工作总结
2014/11/18 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书