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.draggable中文文档
Nov 24 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
lib.utf.js
2007/08/21 Javascript
jquery 问答知识整理
2010/02/11 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python实现统计代码行的方法分析
2017/07/12 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
python退出循环的方法
2020/06/18 Python
事业单位竞聘上岗实施方案
2014/03/28 职场文书
美容院经理岗位职责
2014/04/03 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS