required - 必填

适用于 input、textarea、select 输入框。(checkbox 与 radio 请使用 checked 规则)
字段必填,则值不能为空。字段非必填,则值为空的时候直接验证通过
nice-validator 扩展了选择器 :filled,选择填写了的字段

规则 描述 示例
required 字段必填 required
required(ruleName) 满足规则 ruleName 则字段必填 required(isCompany)
required(jqSelector) 满足 jqSelector 则字段必填 (v0.8.0+) required(#id:filled)、required(#id:checked)、required(#id:enabled)
required(from, class, count) 在一组字段中至少填写一个或多个 (v0.8.0+) required(from, .contact)
required(not, value) 字段必填,但是排除值为 value 的情况 required(not, -1)

示例:字段必填

input type="text" name="username" data-rule="required">
<select name="gender" data-rule="required">
<option value="">select ...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
<textarea name="content" data-rule="required"></textarea>
示例:只有在 A 字段填写过后,B 字段才必填
$('#form1').validator({
fields: {
A: 'required',
B: 'required(#A:filled)'
}
});
示例:如果满足 jQuery 选择器 "#isCompany:checked",则字段必填
$('#form1').validator({
fields: {
companyName: 'required(#isCompany:checked)'
}
});
示例:如果满足规则 "isCompany",则字段必填
<form id="form1">
<input type="checkbox" name="isCompany" id="isCompany">
<input type="text" name="companyName">
</form>
$('#form1').validator({
rules: {
isCompany: function() {
return $('#isCompany').prop('checked');
}
},
fields: {
companyName: 'required(isCompany)'
}
});
示例:className 为 contact 的字段至少填写一个
<input class="contact" name="mobile" placeholder="手机号"
data-rule="required(from, .contact); mobile"
data-msg-required="请至少填写一种联系方式"> <input class="contact" name="tel" placeholder="电话"
data-rule="required(from, .contact); tel"> <input class="contact" name="email" placeholder="邮箱"
data-rule="required(from, .contact); email">

checked - 必选

注意:checkbox 和 radio 类型的输入框请使用 checked 规则(而不是 required)

规则 描述
checked 必选
checked(n) 必选 n 项
checked(n~) 至少选择 n 项
checked(~n) 最多选择 n 项
checked(n1~n2) 选择 n1 到 n2 项

示例:至少选择一项

<label><input type="radio" name="gender" value="1" data-rule="checked">男</label>
<label><input type="radio" name="gender" value="2">女</label>
<label><input type="radio" name="gender" value="0">保密</label>

match - 两个字段匹配和比较

match 可以用于比较两个字段值是否相同,或是否不同,或大小关系,也可以用于比较日期或者时间

规则 描述
match(name) 当前字段值必须和 name 字段的值匹配
match(eq, name) 同上
match(neq, name) 当前字段值必须和 name 字段值不同
match(lt, name) 当前字段值必须小于 name 字段值
match(gt, name) 当前字段值必须大于 name 字段值
match(lte, name) 当前字段值必须小于等于 name 字段值
match(gte, name) 当前字段值必须大于等于 name 字段值
match(gte, name, date) 当前日期值必须大于等于 name 字段日期值
match(gte, name, datetime) 当前时间值必须大于等于 name 字段时间值

示例:确认密码要与密码一致

<label>密码:</label>
<input name="pwd" data-rule="密码: required;password;">
<label>确认密码:</label>
<input name="confirmPwd" data-rule="确认密码: match(pwd);"> 示例:结束日期必须大于开始日期
<label>开始日期:</label>
<input name="startDate" data-rule="开始日期: required;date;">
<label>结束日期:</label>
<input name="endDate" data-rule="结束日期: required;date;match(gt, startDate, date)">

remote - 远程验证

服务端验证并返回结果,URL 为必传参数,默认 POST 请求

规则 描述
remote(URL) 请求服务端验证
remote(get:URL) 使用 GET 方式请求服务端验证
remote(URL, name1, #id2 ...) 传递额外动态参数
remote(URL, foo=value1&bar=value2, name3 ...) 传递额外固定参数 (v0.8.0+)
remote(URL, foo:name1, bar:#id2, name3 ...) 代理参数名称(实际服务器接收的参数为 foo 和 bar)
remote(jsonpURL) 跨域地址自动采用 JSONP 请求方式
`remote([cors: jsonp:][get: post:]URL)` 强制 CORS 请求或者 JSONP 请求,强制 GET 或者 POST 请求 (v0.10.8+)

示例:跨域请求

// 强制 jsonp 请求
"remote(jsonp:/user/checkName)"
// 强制 CORS, 请求类型为 POST (0.10.8+)
"remote(cors:post:/user/checkName)"

服务端返回结果格式

1.直接返回字符串结果

// 为空代表通过
""
// 不为空则代表错误
"名字已被占用"
2.返回 JSON 格式
// 验证通过
{"ok": "名字很棒"}
// 验证不通过
{"error": "名字已被占用"} // 结果在第二级 data
{"status": 200, "data": {"error": "名字已被占用"}}

前端转换服务端返回的结果格式

示例:如果服务端返回格式无法更改,可以用 dataFilter 参数转换

/* 假设服务端返回结果为: {"status":600, "msg":"名字已被占用"}
*/
$('#form1').validator({
dataFilter: function(data) {
if (data.status === 200) return "";
else return data.msg;
},
fields: {
name: "required; length(4~12); remote(/user/check/name)"
}
});

integer - 整数

整数或者整数范围

规则 描述
integer 整数
integer(+) 正整数
integer(+0) 正整数和零
integer(-) 负整数
integer(-0) 负整数和零

range - 数值范围

注意:只验证范围,不验证是整数或者浮点数

规则 描述
range(n~) 请填写不小于 n 的数
range(~n) 请填写不大于 n 的数
range(n1~n2) 请填写 n1 到 n2 的数
range(n1~n2, false) 请填写 n1 到 n2 的数(不包含边界值)(v0.9.0+)

示例:输入 0 ~ 100 的整数

<input name="score" data-rule="required; integer[+0]; range[~100]">

length - 字符长度

如果传第二个参数 “true”,则全角字符(汉子)计算为两个字符

示例

<!-- 密码为 6 到 16 位 -->
<input type="password" name="pwd" data-rule="required;length(6~16)">
<!-- 内容不超过 140 个字符 -->
<textarea name="content" data-rule="length(~140)"></textarea>

filter - 过滤字符

注意:只过滤字符,不验证

规则 描述
filter 过滤 <>`"' 和字符实体编码的字符
filter(RegExp) 自定义过滤正则

示例

// 过滤非数字字符
"filter(\D)"
// 过滤非中文
"filter(^\u0391-\uFFE5)"
 

Nice Jquery Validator 内置属性的更多相关文章

  1. javascript内置属性——arguments

    arguments是javascript中的内置属性,可以直接调用函数的参数,作用类似Array,但本身并不是数组.这次发现它是为了实现封装函数,将不确定数量的数字乘积.比如function mult ...

  2. Ant 脚本打印系统属性变量、ant内置属性

    Ant 脚本打印系统属性变量.ant内置属性 作用 编写ant脚本的时候,经常会引用到系统属性,本脚本用于打印系统常用属性(System.getProperties)与环境变量(Environment ...

  3. JavaScript学习——内置属性

    在js中,几乎所有的对象都是同源对象,都继承Object对象.对象的内置属性指的是它们作为Object实例所具有的属性,这些属性通常反映对象本身的基本信息和数据无关.因此我们称它们为元属性.这些属性通 ...

  4. 对象的内置属性和js的对象之父Object()

    js中对象有constructor,valueOf(),toString()等内置属性和方法; 创建一个空对象的方法: var o = {}; 或者 var o= new Object(); o.co ...

  5. Maven内置属性

    1.内置属性:如${project.basedir}表示项目根目录,${ project.version}表示项目版本 2.POM属性:用户可以引用pom文件中对应的值.如: ${project.bu ...

  6. Maven内置属性、POM属性

    1.内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ ...

  7. python的反射函数(hasattr()、getattr()、setattr()与delattr())和类的内置属性attr(__getattr()__、__setattr()__与__delattr()__)

    主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省),有四个可以实现自省函数. hasattr(object,name) 判断object中是否有name字符串对应的属性或方法,返回Tr ...

  8. Maven内置属性,pom属性

    内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ba ...

  9. Maven内置属性及使用

    Maven共有6类属性: 内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project. ...

随机推荐

  1. WARN: Establishing SSL connection without server’s identity verification is not recommended

    问题 使用Spring JDBC 连接 MySQL时,出现如下警告: WARN: Establishing SSL connection without server's identity verif ...

  2. C语言基础知识(二)——二维数组

    二维数组本质 二维数组本质就是一维数组,只不过**形式是二维**,类似矩阵,使用二维数组表示会更加形象. 二维数组实例 float rain[5][12]; //内含5个数组元素的数组,每个数组元素内 ...

  3. Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.26/images/j..........

    如果你在执行 docker images 出现这样的问题 注意:把你的用户切到root下

  4. Redis学习笔记(4)

    一.Redis主从复制 1. 概念 为了避免服务的单点故障,会把数据复制到多个副本放在不同的服务器上,且这些拥有数据副本的服务器可以用于处理客户端的读请求,扩展整体的性能.我们把这种机制称之为主从复制 ...

  5. [ES6系列-01]Class:面向对象的“新仇旧恨”

    [原创]CoderPower 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 这是公众号(码路工人有力量)开通后的第二篇,写得还是有待改进吧.这次准备写一个关于ES6基础的短文系列,努力尽快 ...

  6. PAT 1032 Sharing (25分) 从自信到自闭

    题目 To store English words, one method is to use linked lists and store a word letter by letter. To s ...

  7. 基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群一 环境准备

    本k8s集群参考了 Michael 的 https://gitee.com/pa/kubernetes-ha-kubeadm-private 这个项目,再此表示感谢! Michael的项目k8s版本为 ...

  8. [JavaWeb基础] 026.JAVA中使用Axis搭建webservice-环境搭建(一)

    在实际的项目开发过程中,我们经常会使用第三方交互,特别是在前后端语言不一致的情况下,相信webservice这个第三方控件大家都清楚.后面会慢慢带大家来学习它的使用方式,下面就先讲讲它的工具搭建. 一 ...

  9. MVC案例之模糊查询与删除

    查询操作: Servlet         //1. 调用 CustomerDAO 的 getAll() 得到 Customer 的集合 List<Customer> customers ...

  10. git status 命令详解

    git status命令表示:文件,文件夹在工作区,暂存区的状态,下图就是文件,文件夹三种状态: Changes to be committed: (use "git restore --s ...