远程验证

例1. 服务器端验证并返回结果

a. 使用规则:remote([get:]url [, name1, [name2]...]);

b. url前面的get:是可选的,加上此参数,将改变ajax方式为GET

c. 从第二个参数起,可选传入字段的name,用于附带额外请求参数

d. 智能适配服务器返回的3种数据格式,对于json格式(2和3)只需要包含所需数据就适配:

1. '' => 成功, '错误消息' => 失败
2. {"ok":""} => 成功,{"ok":"名字很棒!"} => 成功, {"error":"错误消息"} => 失败
3. {"data":{"ok":""}} => 成功,{"data":{"ok":"名字很棒!"}} => 成功, {"data":{"error":"错误消息"}} => 失败

Preview
HTML
<form id="demo_61" action="results.php" method="post" autocomplete="off">
<fieldset>
    <input name="username" data-rule="required;username;remote[check/username.php]" placeholder="用户名">
</fieldset>
<button type="submit">提交</button>
</form>
Javascript
//因DOM已经传参,此处的初始化可有可无
$('#demo_61').validator();

例2. ajax验证时,传递额外的参数

1. 传递的name值需要是表单中已经存在的
2. 可以传递无限个参数
3. 每个参数之间用英文逗号(,)分隔,逗号后面的空格是必须的
Preview
HTML
<form id="demo_62" action="results.php" method="post" autocomplete="off">
    <input type="hidden" name="field1" value="111">
    <input type="hidden" name="field2" value="222">
    <fieldset>
        <input name="username" placeholder="用户名">
    </fieldset>
    <button type="submit">提交</button>
</form>
Javascript
//这个例子采用JS初始化,并且附加了两个额外字段的参数
//规则之间的空格,可有可无
//remote的多个参数之间使用半角逗号加空格(, )分隔,注意:逗号后的空格是必须的
$('#demo_62').validator({
    fields: {
        'username': '用户名: required; username; remote[check/username.php, field1, field2]'
    }
});

例3. 自定义ajax验证

1. 如果内置的remote规则不能满足你的需求,可以 自定义规则 ,将$.ajax()返回出来
2. 提交表单的时机是在表单验证通过后,这里演示了valid回调会在表单验证通过后才被调用
Preview
HTML
<form id="demo_63" autocomplete="off">
    <fieldset>
        <input name="username" placeholder="用户名">
    </fieldset>
    <button type="submit">提交</button>
</form>
Javascript
$('#demo_63').validator({
    rules: {
        //自定义一个规则,用来代替remote(注意:要把$.ajax()返回出来)
        myRemote: function(element){
            return $.ajax({
                url: 'check/username.php',
                type: 'post',
                data: element.name +'='+ element.value,
                dataType: 'json',
                success: function(d){
                    window.console && console.log(d);
                }
            });
        }
    },
    fields: {
        'username': 'required; username; myRemote;'
    },
    // 表单验证通过后,ajax提交
    valid: function(form){
        $.ajax({
            url: 'results.php',
            type: 'post',
            data: $(form).serialize(),
            dataType: 'json',
            success: function(d){
                alert('提交成功!');
            }
        });
    }
});