前台校验插件 nice validator

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

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

规则语句中的符号：

• 分号 ; - 分隔多个规则，也代表逻辑与
• 冒号 : - 分隔 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 - 使字段必填
• checked - 必选，还可以控制选择项目的数量
• match - 当前字段与另一个字段比较
• remote - 获取服务器端验证的结果
• integer - 只能填写整数
• range - 只能填写指定范围的数
• length - 字段值必须符合指定长度
• filter - 过滤当前字段的值，不做验证

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

详情参考内置规则

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

真实案例：

<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'
    }
});