推荐理由:以JS方式执行验证 对页面DOM无入侵 可以定制主题
使用教程:
(1)、引入依赖
<script th:src="@{/common/jquery/jquery.min.js}"></script>
<link th:href="@{/common/nice-validator/jquery.validator.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/common/nice-validator/jquery.validator.min.js}"></script>
<script th:src="@{/common/nice-validator/local/zh-CN.js}"></script>
(2)、定制验证
表单示例:
$modalForm.validator({
timely: 2,// 触发时机
theme: 'yellow_right_effect',//主题
rules: {
// 通过正则表达式定制规则
mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
// 通过函数来定制规则
mobile2: function(elem, param) {
return /^1[3458]\d{9}$/.test($(elem).val()) || '请检查手机号格式';
}
},// 定制规则
fields: { // 监听属性
'roomname': 'required;length[~100]',
'typeid': 'required',
'grade': 'required',
}
}).trigger("validate").on('valid.form', function () {
$.post($room.saveUrl, $modalForm.serialize(), function (result) {
if (checkResult(result)) {
showRoomTable();
bootbox.hideAll();
}
});
});
此外,监听属性fields的时候,还可以直接使用预先定制好的全局规则Rules。
//全局配置
$.validator.config({
rules: { mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"] } }
);