javascript - 用于 backbone.js 验证的自定义验证器

Question

我将 Backbone.js 与 backbone.validation plugin 一起使用 build 一个custom validator检查电子邮件地址(在表单输入中输入)是否已被占用。

新的验证器称为 emailAvailable，您可以在下面看到:(注意:它是 Coffescript，但在底部你会发现转换为标准 javascript 的代码)

# ==================================
#           MODELS 
# ==================================    
User = Backbone.Model.extend(

    urlRoot: "/user"

    validation:
        email:
            fn: "emailAvailable"

    emailAvailable: (value, attr, computedState) ->
       // Ajax call to server (Play framework 2.2.1): returns the string "email available" if it doesn't find the email and returns the email address if it find it
       checkEmail = $.ajax(jsRoutes.controllers.Signup.isEmailExists(value)) 
       checkEmail.done (msg) ->
         emailFound = msg
         if value is emailFound
           return "already taken"

       return
)

# ==================================
#           VIEWS 
# ==================================    
SignUpView = Backbone.View.extend(
    initialize: ->
        Backbone.Validation.bind(this)

    el: "body"

    events:
        "change     input"     :    "validateInput"

    validateInput: (event) ->
        input = $(event.currentTarget)
        inputName = event.currentTarget.name 
        inputValue = input.val()

        this.model.set(inputName, inputValue)
        if this.model.isValid(inputName)
            input.removeClass "error"
            input.addClass "valid"
        else
            input.removeClass "valid"
            input.addClass "error"
...

这行不通，我不明白为什么。我哪里错了？

编辑:代码转换为javascript

var SignUpView, User;

User = Backbone.Model.extend({
  urlRoot: "/user",
  validation: {
    email: {
      fn: "emailAvailable"
    }
  },
  emailAvailable: function(value, attr, computedState) {
    var checkEmail;
    checkEmail = $.ajax(jsRoutes.controllers.Signup.isEmailExists(value));
    checkEmail.done(function(msg) {
      var emailFound;
      emailFound = msg;
      if (value === emailFound) {
        return "already taken";
      }
    });
  }
});

SignUpView = Backbone.View.extend({
  initialize: function() {
    return Backbone.Validation.bind(this);
  },
  el: "body",
  events: {
    "change     input": "validateInput"
  },
  validateInput: function(event) {
    var input, inputName, inputValue;
    input = $(event.currentTarget);
    inputName = event.currentTarget.name;
    inputValue = input.val();
    this.model.set(inputName, inputValue);
    if (this.model.isValid(inputName)) {
      input.removeClass("error");
      return input.addClass("valid");
    } else {
      input.removeClass("valid");
      return input.addClass("error");
    }
  }
});

Answer 1

遗憾的是，Backbone.Validation 不支持异步验证功能。这基本上是默认主干验证流程的限制。它在设计时仅考虑了同步验证方式。

您基本上有 2 个选择:

• 为 ajax 调用指定 async:false 选项
• 为此案例实现您自己的验证流程

我个人会选择选项 2，因为同步 ajax 调用将锁定浏览器直到调用完成。

更新说明:

我回答了这个问题后快速谷歌搜索，看起来有 Backbone.Validation 的扩展，它允许异步验证。请注意，我没有使用过，也没有以任何方式测试过它:)

链接:https://github.com/suevalov/async.backbone.validation