javascript - 使用 can.Map.Validate 验证动态对象

Question

我在 CanJS 中寻找表单验证，并了解了 can.Map.Validate 插件 http://canjs.com/docs/can.Map.validations.prototype.errors.html

在下面取自文档本身的示例中，我们需要在创建对象本身之前提供对象的属性，例如“dueDate”

Task = can.Map.extend({
  init : function(){
    this.validatePresenceOf("dueDate")
  }
},{});
var task = new Task(),
    errors = task.errors()

现在我的要求是我想构建一个 Map 来检查我的字段属性是否为空并返回一个合适的错误。但问题是，我的页面上有多个表单，并且 formObject 是动态生成的。现在，在上面的场景中，在创建对象本身之前，您需要在 init 方法中分配需要执行验证的属性。这不符合我的要求，因为对象正在构建并且属性在创建对象之前是未知的。我在网上搜索了很多但无法破解。

提供代码以便更好地理解 EJS文件:login.ejs

<form id="registrationForm" name="registrationForm" method="POST">

     <input type="text" name="userName" placeholder="UserName" class="inputFieldStyle"></input>
     <input type="password" name="password" placeholder="Password" class="inputFieldStyle"></input>
     <input type="password" name="confirmPassword" placeholder="Confirm Password" class="inputFieldStyle"></input>
     <input type="email" name="email" placeholder="Email" class="inputFieldStyle"></input>
     <input type="button" name="registrationSubmit" value="Register" class="registrationLoginButton"></input>
     <input type="hidden" name="formType" value="registration"></input>
</form>

    <form id="loginForm" name="loginForm" method="POST">
        <input type="userName" name="userName" placeholder="UserName or Email" class="inputFieldStyle"></input>
        <input type="password" name="password" placeholder="Password" class="inputFieldStyle"></input>
         <input type="button" name="loginSubmit" value="Login" class="registrationLoginButton"></input>
          <input type="hidden" name="formType" value="login"></input>
    </form> 

Controller :

var LoginController=can.Control({
    defaults: {view:'login.ejs'}
},
{
    init:function(element,options)
    {
        var fragment=can.view(this.options.view);
        this.element.html(fragment)
    },
    'input[name="registrationSubmit"],input[name="loginSubmit"] click':function(el,ev)
    {
        ev.preventDefault();
        var formDOMObject=el.parent('form');
        var formValueObject=can.deparam(formDOMObject.serialize());
               /*Need to validate formValueObject. Problem is either formDOMObject can be resgitrationForm or LoginForm. Now both have different properties, So i cannot provide predefined properties in init method */
    }
});

有没有办法使用 ca.Map.Validate 插件验证动态对象属性？ 如何访问 init 方法中传递的实例对象？

提前致谢:)

Answer 1

似乎您想要的是创建临时的、一次性的类，其验证是从现有对象构建的，然后可以观察错误。

这是一个示例，显示验证是可观察的，并随源 can.Map 动态变化

can.Map("DynamicFormValidator", {
    newInstance : function(data) {
        var cls = this.extend();
        can.each(data.serialize(), function(val, key) {
            cls.validatePresenceOf(key);
        });
        //cls.prototypes.data = data;
        return can.Map.newInstance.call(cls, data);
    }
}, {
    init : function(data) {
        var that = this;
        this.attr("data", data);
        this.bind("change", function(ev, attr, how, newVal) {
            if(attr.indexOf('data.') === 0) {
                that.attr(attr.substr(5), newVal);
            }
        })
    }
    , computed_errors : can.compute(function() { return this.errors(); })
});

查看实际效果，请访问 http://jsfiddle.net/air_hadoken/8rK2n/2/