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 getElementsByClassName实现代码
Oct 11 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
常用的js方法合集
Mar 10 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
详解Node全局变量global模块
Sep 28 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript 面向对象继承
2009/11/26 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python学生信息管理系统
2018/03/13 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python容器类型公共方法总结
2020/08/19 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
简历里的自我评价范文
2014/02/24 职场文书
党员公开承诺事项
2014/03/25 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
个人担保书范文
2014/05/20 职场文书
婚宴新郎致辞
2015/07/28 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
卖车协议书范文
2016/03/23 职场文书
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS