Question

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

在下面的示例中，我们需要提供对象的属性，例如＆lt; dueDate＆＃39;在创建对象本身之前

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

现在我的要求是我要构建一个Map来检查我的field属性是否为空并返回一个合适的错误。但问题是，我的页面上有多个表单，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>

控制器：

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（或计算）以反映dom中的状态我使用sebastion proto http://sporto.github.io/blog/2014/03/04/form-validations-with-canjs/

的方法

这是jsfiddle

   can.fixture({
    "GET contacts":function(){
        return [{'fname':'Cherif','lname':'BOUCHELAGHEM'}]
    }
})

can.Model.extend('Contact',{
    init:function(){
          this.validatePresenceOf(['fname','lname']);
    },
    findAll: 'GET contacts'
},{});

can.Control.extend('ContactForm',{
    init:function(el,options){
        this.contact=new Contact();
        this.errors=new can.Map({});
        this.element.html(can.view('validation',contact:this.contact,                                              errors:this.errors}));
    },

    'form submit': function () {
        var errors = this.contact.errors();
        this.errors.attr(errors, true);  
        return false;
    }
});
Mustache.registerHelper('showErrors', function (errors, prop) {
  var attr = errors.attr(prop);
  if (attr) {
    return prop + ' ' + attr[0];
  } else {
    return '';  
  }
});
new ContactForm('#val');

Answer 2

看起来像你想要的是制作临时的，一次性的类，其中包含从现有对象构建的验证，然后可以观察到错误。

这是一个示例，显示验证是可观察的，并且可以使用源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/

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

2 个答案: