jQuery Validate表单验证深入学习


Posted in Javascript onDecember 18, 2015

之前一篇文章介绍了jQuery Validate表单验证入门的基础知识,详细内容参见《jQuery Validate表单验证入门学习》今天这篇文章深入学习jQuery Validate表单验证,以下就是文章的全部内容:

1、用其他方式替代默认的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
});

使用 ajax 方式

$(".selector").validate({  
 submitHandler: function(form) 
 {  
  $(form).ajaxSubmit();  
 } 
 })

可以设置 validate 的默认值,写法如下:

$.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

如果想提交表单, 需要使用 form.submit(),而不要使用 $(form).submit()。
2、debug,只验证不提交表单
如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
  debug:true
 });
});

如果一个页面中有多个表单都想设置成为 debug,则使用:

$.validator.setDefaults({
 debug: true
})

3、ignore:忽略某些元素不验证
ignore: ".ignore"
4、更改错误信息显示的位置
errorPlacement:Callback
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) { 
 error.appendTo(element.parent()); 
}

实例

<tr>
 <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
 <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
 <td class="status"></td>
</tr>
<tr>
 <td style="padding-right: 5px;">
  <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
  <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
 </td>
 <td style="padding-left: 5px;">
  <input id="dateformat_am" name="dateformat" type="radio" value="1" />
  <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
 </td>
 <td></td>
</tr>
<tr>
 <td class="label"> </td>
 <td class="field" colspan="2">
  <div id="termswrap">
   <input id="terms" type="checkbox" name="terms" />
   <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
  </div>
 </td>
</tr>

errorPlacement: function(error, element) {
 if ( element.is(":radio") )
  error.appendTo( element.parent().next().next() );
 else if ( element.is(":checkbox") )
  error.appendTo ( element.next() );
 else
  error.appendTo( element.parent().next() );
}

代码的作用是:一般情况下把错误信息显示在 <td class="status"></td> 中,如果是 radio 则显示在 <td></td> 中,如果是 checkbox 则显示在内容的后面。
参数 类型 描述 默认值
errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1, #messageBox2" 
errorLabelContainer Selector 把错误信息统一放在一个容器里面。 
wrapper String 用什么标签再把上边的 errorELement 包起来。 
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5、更改错误信息显示的样式
设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个 validation.css,专门用于维护校验文件的样式。

input.error { border: 1px solid red; }
label.error {
 background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

 padding-left: 16px;

 padding-bottom: 2px;

 font-weight: bold;

 color: #EA5200;
}
label.checked {
 background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、每个字段验证通过执行函数
success:String,Callback
要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。

success: function(label) {
 // set   as text for IE
 label.html(" ").addClass("checked");
 //label.addClass("valid").text("Ok!")
}

添加 "valid" 到验证元素,在 CSS 中定义的样式 <style>label.valid {}</style>。
success: "valid"
7、验证的触发方式修改
下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加。
触发方式 类型 描述 默认值
onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true
onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮)。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时验证。 true
focusInvalid Boolean 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 true
focusCleanup Boolean 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 false

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
 $("#reset").click(function() {
  validator.resetForm();
 });

});

8、异步验证
remote:URL
使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。

remote: "check-email.php"
remote: {
 url: "check-email.php",  //后台处理程序
 type: "post",    //数据发送方式
 dataType: "json",   //接受数据格式 
 data: {      //要传递的数据
  username: function() {
   return $("#username").val();
  }
 }
}

远程地址只能输出 "true" 或 "false",不能有其他输出。
9、添加自定义校验
addMethod:name, method, message
自定义验证方法

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for(var i = 0; i < value.length; i++){
  if(value.charCodeAt(i) > 127){
   length++;
  }
 }
 return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意:在 messages_cn.js 文件中添加:isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证
radio 的 required 表示必须选中一个。

<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
 <option value=""></option>
 <option value="1">Buga</option>
 <option value="2">Baga</option>
 <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
 <option value="b">Banana</option>
 <option value="a">Apple</option>
 <option value="p">Peach</option>
 <option value="t">Turtle</option>
</select>

附表:内置验证方式:

jQuery Validate表单验证深入学习

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是针对jQuery Validate表单验证的深入学习,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js判断样式className同时增加class或删除class
Jan 30 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
javascript实现tab切换特效
Nov 12 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 #Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 #Javascript
jQuery Validate表单验证入门学习
Dec 18 #Javascript
jQuery定义插件的方法
Dec 18 #Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 #Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
You might like
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript 面向对象 function类
2010/05/13 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
Python字符串拼接的几种方法整理
2017/08/02 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
中学教师岗位职责
2013/11/26 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
高考标语大全
2014/06/05 职场文书
2014年教育工作总结
2014/11/26 职场文书
写给医生的感谢信
2015/01/22 职场文书
会议新闻稿
2015/07/17 职场文书
教师节简报
2015/07/20 职场文书