前台校验插件 nice validator

最新推荐文章于 2024-04-15 09:39:31 发布

因为热爱本身，就是奖励

最新推荐文章于 2024-04-15 09:39:31 发布

阅读量1.5k

点赞数 1

分类专栏： nice validator

本文链接：https://blog.csdn.net/u013943009/article/details/78489508

版权

nice validator 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.加载插件

 <link rel="stylesheet" type="text/css" href="dist/jquery.validator.css"/>
   <script type="text/javascript"src="dist/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="dist/jquery.validator.min.js?local=zh-CN"></script>

2. 了解规则

(1)、定义规则语句

"display: rule1; rule2(p1, p2); ...rulen(n1~n2)"

前面的 display: 是可选的，用于替换错误消息中的{0}，一般为显示的字段名。
多个规则由分号（;）分开，末尾分号可省略，不限制规则数量，按规则先后顺序执行验证
未定义的规则自动忽略，对验证不产生影响

规则语句中的符号：

分号 ; - 分隔多个规则，也代表逻辑与
冒号 : - 分隔 display（字段显示名）与规则语句
括号 () - 规则传参使用，也可以使用方括号（[ ]）
逗号 , - 分隔规则的参数，注意：逗号后需加空格
波浪 ~ - 定义范围值使用
俺的 & - 逻辑与，用在某个规则前面，与;（分号）效果差不多
叹号 ! - 逻辑非，用在某个规则前面，对规则取反
竖线 | - 逻辑或，用在多个规则之间，多个规则满足之一则通过

示例：

// 单个规则
"required"

// 多个规则
"required; email; remote(/server/check/email)"

// 范围参数
"range(1~100)"

// 规则有多个参数
"match(neq, oldPassword)"

// 定义显示替换名称
"邮箱: required; email"

// 逻辑或
"required; mobile|email; remote(/server/check/user)"

// 逻辑非
"required; !digits"

(2)、配置规则

示例：DOM 配置规则，使用 data-rule

<input name="email" data-rule="required;email;remote(/path/to/server)">

示例：JS 配置规则，使用 fields 参数

$("#form").validator({
    fields: {
        email: "required;email;remote(/path/to/server)"
    }
});

(3)、内置规则

插件内置 8 个规则：

自定义规则如果与内置规则同名，则自定义规则优先

详情参考内置规则

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)"

服务端返回结果格式

直接返回字符串结果

// 为空代表通过
""
// 不为空则代表错误
"名字已被占用"

返回 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)"
    }
});

真实案例：

<label for="username" class="lbel"><strony class="strC1">*</strony>用户名</label>
	<input type="text" id="username" name="username"
		data-rule="用户名:required;username;remote[${ctx}/user/isExistByUsername.action]"
		placeholder="请输入用户名"> <span class="msg-box"
		for="username"></span>

/**
	 * 验证帐号是否存在
	 * 
	 * @param username
	 *            用户名
	 * @param response
	 *            响应
	 */
	@RequestMapping("isExistByUsername")
	@ResponseBody
	public Map<String, String> isExistByUsername(User user,
			HttpServletResponse response) {

		log.info("用户名验证");

		Map<String, String> resultMap = new HashMap<String, String>();
		try {
			if (userService.isExist(user)) {
				resultMap.put("error", "帐号信息已经存在");
			} else {
				resultMap.put("ok", "恭喜，帐号可用");
				//resultMap.put("", "");
			}
		} catch (Exception e) {
			resultMap.put("error", "请重新输入账号信息");
		}
		return resultMap;
	}

回调方式 - JS传参（具有最大的灵活性，几乎搞定任何验证）

JS传参：ruleName: function(element, param, field) {}
@param element 当前验证的DOM元素
@param param 规则传递的参数
@param field 当前字段元数据
以下是可返回的数据：
return undefined（等同于无return） => √通过
return true => √通过
return false => ×不通过
return "String" => ×不通过，并且认为这个字符串是错误消息
return {"ok": "正确提示"} => √通过，并且提示这个ok的消息
return {"error": "错误消息"} => ×不通过，并且提示这个error的消息
return $.ajax()，ajax验证 => 等待验证结果（注：ajax返回的数据格式参见remote的示例）
return null => 忽略本次验证（跳过该字段的验证，如果已经显示了消息将会自动隐藏）

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”，则全角字符（汉子）计算为两个字符

规则	描述
`length(n)`	请填写 n 个字符
`length(n~)`	请至少填写 n 个字符
`length(~n)`	请最多填写 n 个字符
`length(n1~n2)`	请填写 n1 到 n2 个字符
`length(n~, true)`	请至少填写 n 个字符（全角字符计算双字符）

示例：

<!-- 密码为 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)"

(4)、自定义规则

详情参考自定义规则(自己写正则，自己定义新的校验方式)

示例：在 local/zh-CN.js 中配置全局规则（全局生效）

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

示例：通过 DOM 方式自定义规则（只对当前字段有效）

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

示例：通过 rules 配置规则（当前表单实例有效）

$('#form1').validator({
    rules: {
        // 使用正则表达式定义规则
        mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
        // 使用函数定义规则
        xxx: function(elem, param) {
            return /^1[3458]\d{9}$/.test($(elem).val()) || '请检查手机号格式'; 
        }
    },
    fields: {
        // 对字段 username 应用规则 mobile
        'username': 'required;mobile'
    }
});

因为热爱本身，就是奖励

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前台校验插件 nice validator

插件用前准备：nice-validator 依赖 [jQuery]1。除了直接引用插件，还支持 AMD 模块系统（没了解过）。(1)、直接引用一行代码引入插件，local 参数用来加载对应的配置文件。如果不传 local 参数，配置以及样式就需要自行引入&lt;script src="path/to/nice-validator/jquery.validator.js?local=zh-CN"&g...
复制链接

扫一扫

专栏目录