规则定义方式

(1). 正则

适用于使用单个正则能搞定的验证。

// 使用数组包裹正则和错误消息,规则不通过时提示该消息
mobile: [/^1[3458]\d{9}$/, '请检查手机号格式']
// 或者,直接定义正则,需要另外定义错误消息,否则提示默认消息
mobile: /^1[3458]\d{9}$/

(2). 函数

函数方式具有最大的灵活性,搞定任何验证。不同返回值,导致不同验证结果:

返回值 结果 描述
return undefined(无返回)   不影响验证结果不提示消息(继续验证下一个规则)
return null   忽略本次验证(跳过该字段的验证,如果已经显示了消息将会自动隐藏)
return true √通过  
return false ×不通过  
return "" √通过  
return "错误消息" ×不通过 提示“错误消息”
return {"ok": "正确"} √通过 提示“正确”
return {"error": "错误消息"} ×不通过 提示“错误消息”
return $.ajax()   ajax验证,等待服务器返回验证结果

例1:自定义规则,如果通过返回true,否则返回错误消息

 mobile: function(element, params) {

    return /^1[3458]\d{9}$/.test(element.value) || '请检查手机号格式';
} 例2:使用内置的 .test() 方法检测是否符合某个规则
loginName: function(element) {
return /^[a-zA-Z]\w{3,}/.test(element.value) ||
this.test(element, "mobile")===true ||
this.test(element, "email")===true ||
'请填写用户名、手机号或者邮箱';
} 例3:自定义 ajax 验证
// 你只需要将 $.ajax 返回,并且保证 response 符合上面的返回值说明,其他的插件都会自动处理。
// 当然,你也可以加上 success 回调做点别的,或者自己加上自定义 header
myRemote: function(element){
return $.ajax({
url: 'check/username.php',
type: 'post',
data: element.name +'='+ element.value,
dataType: 'json'
});
}
例4:无返回值,对验证结果没有影响
passwordStrength: function() {
// 密码强度验证 和 UI处理
}
例5:动态跳过当前字段的验证
myRule: function() {
if (foo) {
return "Error Message"
}
// 跳过验证(当前规则之后的所有规则都不被验证)
else (bar) {
return null
}
}

规则作用范围

(1). 全局

使用 $.validator.config(),建议配置在 local 配置文件(如:zh-CN.js)中
任何实例,任何字段都能访问到该规则

$.validator.config(
rules: {
mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"]
}
);

(2). 当前实例

在调用初始化验证的时候传参,只对调用时的实例有效

$("#myForm").validator(
rules: {
mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"]
}
);

(3). 当前字段

只能通过 DOM 方式在表单元素上定义

<input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']">

 
 

Nice Jquery Validator 自定义规则的更多相关文章

  1. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  2. jQuery validator自定义

    项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...

  3. jquery validate自定义规则

    //检查身份证号码是否存在 $.validator.addMethod("checkIDCardExist", function (value, element) { if ($( ...

  4. Nice Jquery Validator 常用规则整理

    一些简单规则 numeric: [/^[0-9]*$/, '请填写数值'], money: [/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/, "请填写有效的金额" ...

  5. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  6. jQquery.validate自定义规则的使用案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  8. jQuery.Validate自定义规程的使用案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery validate自定义checkbox验证规则和样式

    参考:http://blog.csdn.net/xh16319/article/details/9987847 自定义checkbox验证,“检查checkbox是否选中” jQuery.valida ...

随机推荐

  1. mysql小白系列_14 线上故障分析与排错

    1.重现故障5---线上执行update报错,并处理.(表结构和UPDATE语句自己构造,请给出详细步骤) 1)update故障出现ERROR 1206 (HY000): The total numb ...

  2. mysql小白系列_07 锁与事务

    1.MySQL参数autocommit生产环境设1还是0?为什么? 2.MySQL参数tx_isolation生产环境上大多数是设什么值,为什么? 3.与MySQL锁相关的有哪些因素? 1.MySQL ...

  3. [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本

    前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...

  4. Java开发架构篇:领域驱动设计架构基于SpringCloud搭建微服务

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言介绍 微服务不是泥球小单体,而是具备更加清晰职责边界的完整一体的业务功能服务.领域驱动 ...

  5. .Net基础之3——运算符

    (3)Convert类型转换 1.类型如果相兼容的两个变量,可以使用自动类型转换或者显示类型转换. 但是如果两个类型的变量不兼容,这个时候可以使用一个叫做Convert的转换工厂进行转换. 注意:使用 ...

  6. Class basic syntax

    Class basic syntax Wikipedia In object-oriented programming, a class is an extensible program-code-t ...

  7. vue脚手架3.0的安装与使用

    一.安装 1.先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...

  8. ExtJS按钮

    var toppanel = Ext.create('Ext.panel.Panel',{ layout : { type : 'absolute' }, bodyStyle : { backgrou ...

  9. 使用cxfreeze打包成exe文件

    旧版本下载链接地址python3.4以下的:https://www.lfd.uci.edu/~gohlke/pythonlibs/#cx_freeze 最新版本python3.5以上直接使用  pip ...

  10. web自动化之键盘操作

    简单介绍下web自动化怎么触发键盘操作 按键操作 需要导入的类from selenium.webdriver.common.keys import Keys 组合键Keys.CONTROL 也就是我们 ...