niceValidator

快速上手

例1. DOM传参

1. 要验证一个表单，只需要给字段绑定规则“data-rule”就可以了
2. 字段可以有多条规则，规则之间用分号（;）分隔
3. js初始化不是必要的，只要是字段并且带有“data-rule”属性，即使是新插入的一段DOM也可以立马验证
4. 其中：required是内置规则（核心自带），username、password是配置文件中设置的全局规则（配置文件）

Preview

HTML

<form id="demo_11" action="results.php" method="post" autocomplete="off">
<fieldset>
    <p><input type="text" name="user[name]" data-rule="required;username" placeholder="用户名"></p>
    <p><input type="password" name="user[pwd]" data-rule="required;password" placeholder="密码"></p>
</fieldset>
<button type="submit">提交</button>
</form>

例2. js传参（这和上面的DOM传参等价）

1. 如果你愿意的话，也可以“DOM传参” 和 “js调用”混搭，js传递的规则优先级最高

Preview

HTML

<form id="demo_12" action="results.php" method="post" autocomplete="off">
<fieldset>
    <p><input type="text" name="user[name]" placeholder="用户名"></p>
    <p><input type="password" name="user[pwd]" placeholder="密码"></p>
</fieldset>
<!--button type="submit">提交</button-->
<a href="javascript:" class="submit-btn">提交</a>
</form>

Javascript

$('#demo_12').validator({
    fields: {
        'user[name]': 'required; username;'
        ,'user[pwd]': 'required; password;'
    }
})
// 使用链接代替submit按钮（注意：这种情况下输入框里面的回车键不能触发submit事件）
.on("click", "a.submit-btn", function(e){
    $(e.delegateTarget).trigger("validate");
});

例3. 设置显示替换名

1. 在规则字符串的最前面加上该字段的名字，并且跟上一个冒号(:)，例如下面的“用户名:”, 参见公共定义
2. 如果是js调用也是一样的
3. 下面的例子同时在form上绑定了参数

Preview

HTML

<form id="demo_13" action="results.php" method="post" autocomplete="off"
 data-validator-option="{theme:'yellow_right_effect',stopOnError:true}">
<fieldset>
    <p><input type="text" name="username" data-rule="用户名:required;username" placeholder="用户名"></p>
    <p><input type="password" name="password" data-rule="密码:required;password" placeholder="密码"></p>
</fieldset>
<button type="submit">提交</button>
</form>

例4. 自动获取替换名

1. 通过自定义display参数

Preview

HTML

<form id="demo_14" action="results.php" method="post" autocomplete="off">
<fieldset>
    <p><input type="text" name="username" placeholder="用户名"></p>
    <p><input type="password" name="password" placeholder="密码"></p>
</fieldset>
<button type="submit">提交</button>
</form>

Javascript

$('#demo_14').validator({
    // 获取display
    display: function(el){
        return el.getAttribute('placeholder') || '';
    },
    fields: {
        'username': 'required; username;'
        ,'password': 'required; password;'
    }
});

例5. Ajax提交表单

1. 可以通过valid参数传入回调，参见配置
2. 也可以直接接收valid.form事件（下面例子采用接收事件的方式），参见事件

Preview

HTML

<div id="result_15" class="tip-ok" style="display:none">提交成功</div>
<form id="demo_15" autocomplete="off"
    data-validator-option="{theme:'simple_right'}"
>
<fieldset>
    <p><input type="text" name="username" data-rule="用户名:required;username" placeholder="用户名"></p>
    <p><input type="password" name="password" data-rule="密码:required;password" placeholder="密码"></p>
</fieldset>
<button type="submit">提交</button>
</form>

Javascript

//接收表单验证通过的事件
$('#demo_15').bind('valid.form', function(){
    $.ajax({
        url: 'results.php',
        type: 'POST',
        data: $(this).serialize(),
        success: function(d){
            $('#result_15').fadeIn(300).delay(2000).fadeOut(500);
        }
    });
});

例6. 规则的逻辑或、逻辑非

1、使用竖线（|）分隔的多个规则，只要其中一个验证通过，就算通过
2、连续的规则或，只需要给最后一条规则设置错误消息
3、在规则名前面加上逻辑非（!），即可反转规则的验证效果
4、规则非，不能使用原本规则的消息，只能重新定义

Preview

HTML

<form id="demo_16" action="results.php" method="post" autocomplete="off">
<fieldset>
    <p><input name="user[name]" placeholder="手机号或邮箱"
        data-rule="用户名: required; mobile|email;"
        data-msg-email="{0}可以是手机号或者邮箱"
    ></p>
    <p><input name="user[pwd]" placeholder="密码"
        data-rule="密码: required; !digits; length[6~]"
        data-msg-digits="{0}不能使用纯数字"
        data-msg-length="{0}至少6位"
    ></p>
</fieldset>
<button type="submit">提交</button>
</form>