Question

所以我想在javascript中构建一个表单验证类/对象。我认为它的工作方式是这样的：

var form=new Validation(); 
form.addField("name","Your name","required");
form.addField("email","Email Address","is_email");
.........
form.validate();

我在想validation类是这样定义的吗？

validation
{
  var fields=new Array();
  var labels=new Array();
  var rules=new Array();
  var count=0;

  function addField(field,label,rule)
  {
    this.fields[count]=field;
    this.labels[count]=label;
    this.rules[count]=rule;
    this.count=count+1;
  }

  function validate()
  {
    var valid;
    for (x=0; x< count; x++)
    {
      valid=false;
      switch (this.rules[x])
      {
         case 'required':
           valid=this.validate_required(this.fields[x]);
           break;

         case 'email':
           valid=this.validate_email(this.fields[x]);
           break;
       }

       if (! valid)
         this.addError(this.fields[x],this.rules[x],this.labels[x]);
     }

     if (this.hasErrors())
       return false;  
     else
       return true;
   }

..........
}

我知道这可能是不可能的，因为它现在是。我的问题是，我能做些什么才能使第一个代码块（创建Validation的新实例并将规则添加到其中）才有效？

提前致谢。

Answer 1

你只是缺少一些OO表示法。标有"// ***"条评论的行是我从原始代码示例中更改的行：

function Validation() // ***
{
  var fields=new Array();
  var labels=new Array();
  var rules=new Array();
  var count=0;

  this.addField = function (field,label,rule) // ***
  {
    fields[count]=field; // ***
    labels[count]=label; // ***
    rules[count]=rule;   // ***
    count=count+1;
  }

  this.validate = function () // ***
  {
    var valid;
    for (x=0; x< count; x++)
    {
      valid=false;
      switch (rules[x]) // ***
      {
         case 'required':
           valid=this.validate_required(fields[x]); // ***
           break;

         case 'email':
           valid=this.validate_email(fields[x]); // ***
           break;
       }

       if (! valid)
         this.addError(fields[x],rules[x],labels[x]); // ***
     }

     if (this.hasErrors())
       return false;  
     else
       return true;
   }
}

哦，我没有看到validate_required()，validate_email()，addError()或hasErrors()。可能想添加这些。

Answer 2

Javascript是Prototype-based编程语言。所以没有真正的方法来创建类。创建类（或模拟它）的方法是使用在其中包含状态和更多函数的函数，包含行为。

要解决您的问题，您可以使用全局级别函数创建验证类，并使用新关键字为每个表单实例化它。

所以实际上你只需要让你的类定义成为一个函数。（约定：Capital V仅用作表示该函数是一个类的符号）

function Validation()
{
  var fields=new Array();
  var rules=new Array();
  var labels=new Array();
  var errors=new Array();
  var count=0;



  function addError(field,rule,label){
    //add error in errors array
  }

  function validate_required(field){
    //do required validation 
  }

  function validate_email(field){
    //do email validation
  }

  return function(){

      addField = function(f,r,l){
        this.fields[count]=f;
        this.rules[count]=r;
        this.labels[count]=l;
        this.count=count+1;
      }

      validate = function ()
      {
        var valid;
        for (x=0; x< count; x++)
        {
          valid=false;
          switch (this.rules[x])
          {
             case 'required':
               valid=validate_required(this.fields[x]);// create private function
               break;

             case 'email':
               valid=validate_email(this.fields[x]);// create private function
               break;
           }

           if (! valid)
             addError(this.fields[x],this.rules[x],this.labels[x]);
         }

         if (this.hasErrors())
           return false;  
         else
           return true;
       }
   }
}

要了解有关JavaScript及其功能（和烦扰）的更多信息，您可以浏览Douglas Crockford's home page。有很多易于理解的JavaScript引用，尤其是与Prototype和继承相关的内容。

Javascript OO问题

2 个答案: