快速入门Nice Validator

nice validator   

推荐理由：以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]+$/, "请填写中文字符"] } }

);