Nice Jquery Validator 内置属性
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 内置属性的更多相关文章
- javascript内置属性——arguments
arguments是javascript中的内置属性,可以直接调用函数的参数,作用类似Array,但本身并不是数组.这次发现它是为了实现封装函数,将不确定数量的数字乘积.比如function mult ...
- Ant 脚本打印系统属性变量、ant内置属性
Ant 脚本打印系统属性变量.ant内置属性 作用 编写ant脚本的时候,经常会引用到系统属性,本脚本用于打印系统常用属性(System.getProperties)与环境变量(Environment ...
- JavaScript学习——内置属性
在js中,几乎所有的对象都是同源对象,都继承Object对象.对象的内置属性指的是它们作为Object实例所具有的属性,这些属性通常反映对象本身的基本信息和数据无关.因此我们称它们为元属性.这些属性通 ...
- 对象的内置属性和js的对象之父Object()
js中对象有constructor,valueOf(),toString()等内置属性和方法; 创建一个空对象的方法: var o = {}; 或者 var o= new Object(); o.co ...
- Maven内置属性
1.内置属性:如${project.basedir}表示项目根目录,${ project.version}表示项目版本 2.POM属性:用户可以引用pom文件中对应的值.如: ${project.bu ...
- Maven内置属性、POM属性
1.内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ ...
- python的反射函数(hasattr()、getattr()、setattr()与delattr())和类的内置属性attr(__getattr()__、__setattr()__与__delattr()__)
主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省),有四个可以实现自省函数. hasattr(object,name) 判断object中是否有name字符串对应的属性或方法,返回Tr ...
- Maven内置属性,pom属性
内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ba ...
- Maven内置属性及使用
Maven共有6类属性: 内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project. ...
随机推荐
- jquery.min.js v1.10.3版本autocomplete方法会在text前添加搜索出多少项的文本信息 要去除
http://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text ...
- 导出word excel 方法
---导出excel public static void DataTableToExcelXjd(DataTable dt, string Title, string TmpColsName) { ...
- Java常用设计模式详解1--单例模式
单例模式:指一个类有且仅有一个实例 由于单例模式只允许有一个实例,所以单例类就不可通过new来创建,而所有对象都默认有一个无参的构造函数可以创建对象,所以单例类不仅不能提供public的构造方法,还需 ...
- 【IOS】点击按钮-去高亮-加点击效果
(1)前提:html页面 ,手机端, (2)问题一: 在iphone上(貌似是9以后..),给div/span/...等元素上加onclick事件,根本不起作用,这是为啥捏? -- 在元素上加 cu ...
- NO.3 MSP432P4_SDK浏览
网上关于MSP432的参考资料很少,我们要学习的最权威的资源只有TI提供的SDK.这是好处也是坏处,好处是我们学习的是TI一手资源,不再是拾人牙慧:坏处是英语能力要求较高. 闲话少说,我们先来看SDK ...
- 记录我在Docker 中一步一步搭建Mysql 数据库存开发环境
准备在docker下来搭建mysql开发环境玩玩,当作学习笔记.搭建环境是:win10 企业版,docker desktop 19.03.8,mysql 5.7,Windows PowerShell ...
- Maven快速入门(一)Maven介绍及环境搭建
做开发的程序员都知道,在系统开发需要各自各样的框架.工具.其中有一种工具不管你是初级程序员还是高级程序员都必须熟练掌握的,那就是项目管理工具(maven.ant.gradle).接下来就总结Maven ...
- Matlab矩阵学习一 矩阵的创建
Matlab矩阵创建 1.直接输入数值创建 矩阵元素要用[ ] 括起来,";"代表一行结束,以下创建方式也是合法的,矩阵的元素可以是实数,也可以是复数,复数用a+bi表 ...
- 关于URL优化的一些经验
URL在搜索结果列表中时显示内容之一.设计网站结构时需要对目录及文件命名系统做事先规划.总的原则是首先从用户体验出发,URL应该清晰友好.方便记忆,然后才考虑URL对排名的影响.具体可以考虑以下几个方 ...
- 安装xlrd包的时候,总是报错:ERROR: Could not install packages due to an EnvironmentError: HTTPConnectionPool (host='127.0.0.1', port=8888):。。。
安装xlrd包的时候,总是报错:ERROR: Could not install packages due to an EnvironmentError: HTTPConnectionPool (ho ...