jQuery.validate 常用方法及需要注意的问题


Posted in Javascript onMarch 20, 2013

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

 Default: 把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是: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  Default: "error"
指定错误提示的css类名,可以自定义错误提示的样式

errorElement:String  Default: "label"
用什么标签标记错误,默认的是label你可以改成em

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  Default: true
提交时验证. 设置唯false就用其他方法去验证
onfocusout:Boolean  Default: true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup:Boolean  Default: true
在keyup时验证.
onclick:Boolean  Default: true
在checkboxes 和 radio 点击时验证
focusInvalid:Boolean  Default: true
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:Boolean  Default: false
如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用

// 重置表单
$().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));
}, "请正确填写您的邮政编码");

1.要在additional-methods.js文件中添加或者在jquery.validate.js添加
建议一般写在additional-methods.js文件中

2.在messages_cn.js文件添加:isZipCode: "只能包括中文字、英文字母、数字和下划线",

调用前要添加对additional-methods.js文件的引用。

10radio和checkbox、select的验证

1.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"/>

 

2.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[]" />

    3.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>
Javascript 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
复制js对象方法(详解)
Jul 08 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
js实现自动锁屏功能
Jun 02 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 #Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 #Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 #Javascript
jquery的ajax请求全面了解
Mar 20 #Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 #Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
You might like
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
第六章 php目录与文件操作
2011/12/30 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
实例详解vue中的$root和$parent
2019/04/29 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python tkinter控件布局项目实例
2019/11/04 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
校运动会广播稿(100篇)
2014/09/12 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
武夷山导游词
2015/02/03 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Mysql中mvcc各场景理解应用
2022/08/05 MySQL