Question

我已经做了一个小提琴来展示我正在为我的用户ID字段做的简单验证：

使其成为必需（尽可能积极地验证）
设置最小长度（尽可能积极地验证）
设置最大长度（尽可能积极地验证）
运行AJAX调用以确保用户ID尚不存在（我只想在模糊时运行此）

我没有使用validate（） - 远程规则，因为我希望返回一个自定义对象，而不仅仅是一个简单的字符串。如果可以使用远程和，它只调用模糊规则，那么我可以尝试。（我的所有AJAX响应都遵循设定的对象定义。）

HTML

<form action="#" method="get" id="register-wizard">User ID:
    <br />
    <input type="text" class="form-control required confirm-me" id="User_UserId" name="User.UserId" autocomplete="off" />
    <div class="loader user-id hide" style="display: none;"><i class="icon-spinner icon-spin icon-large"></i> (Checking...)</div>
    <p>
        <button id="next">Next</button>
    </p>
</form>

的JavaScript

var $wizardForm = $("#register-wizard");
var $validator = $wizardForm.validate({
    rules: {
        "User.UserId": {
            required: true,
            minlength: 3,
            maxlength: 125,
            userIdCheck: true
        }
    }
});

$("#next").click(function (e) {
    e.preventDefault();    
    //do validations before moving onto the next tab in the wizard
    var $valid = $wizardForm.valid();
    if (!$valid) {
        $validator.focusInvalid();
        return false;
    }
});    
jQuery.validator.addMethod("userIdCheck", function (value, element) {
    var validator = this;
    this.startRequest(element);    
    var $loader = $(".loader.user-id");    
    $.ajax({
        url: "/echo/json/",
        type: "POST",
        data:{
            json: JSON.stringify({
                text: 'some text'
            }),
            delay: 1
        },
        success: function (result) {
            console.log("result: ")
            console.log(result);

            validator.stopRequest(element, true);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("A server error occurred.\n\n" + textStatus);
        },
        beforeSend: function () {
            $loader.show();
        },
        complete: function () {
            $loader.hide();
        }
    });

return "pending";
}, "The user ID is already in use");

这是我的小提琴： http://jsfiddle.net/eHu35/3/

Answer 1

引用标题：“仅关于模糊的一条规则;其余应该是正常的吗？”

不，各种触发事件，例如onfocusout，onkeyup等，都是在“每个字段”的基础上触发的。您不能在某个字段上设置一个规则，例如min，在所有事件上正常触发，而同一字段的另一个规则（例如remote）仅由onfocusout触发。（但是，您可以为不同的字段设置不同的事件）。

在我看过的关于此主题的大多数SO主题中，用户将禁用onkeyup以防止remote规则的持续过早触发。例如，在测试重新验证代码时，需要禁用onkeyup，因为每次发生故障时都会生成新代码。

Answer 2

我遇到了同样的问题，并且使用这种方式工作，而不是使用远程方法：

$.validator.addMethod("userIdCheck", function(value, element, params) {
    if (event.type == "blur" || event.type == "focusout") {
        var result;
        $.ajax({url: "path", async: false,
                success: function(data){
                  result = data;
              }})
        return result;
    } else {
        return true;
    }       
}, "The user ID is already in use");

但这不适用于firefox，事件未定义。所以我修改了源代码（任何人都有另一种方式？）：

function delegate( event ) {
    var validator = $.data( this[ 0 ].form, "validator" ),
        eventType = "on" + event.type.replace( /^validate/, "" ),
        settings = validator.settings;
        // add event to validator
        validator.event = event;
        if ( settings[ eventType ] && !this.is( settings.ignore ) ) {
            settings[ eventType ].call( validator, this[ 0 ], event );
        }
    }

然后我们可以这样使用：

$.validator.addMethod("userIdCheck", function(value, element, params) {
    var eventType = this.event.type;
    if (eventType == "blur" || eventType == "focusout") {
        var result;
        $.ajax({url: "path", async: false,
                success: function(data){
                  result = data;
              }})
        return result;
    } else {
        return true;
    }
}, "The user ID is already in use");

不够完美，但这是我找到解决此问题的唯一方法。

JQuery.validate - 仅限模糊的一条规则;其余的应该是正常的吗？

2 个答案: