Javascript OO 问题

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 编程语言。所以没有真正的方法来拥有类。 创建类（或模拟它）的方式是使用具有状态的函数和包含行为的更多函数。

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

所以实际上你只需要将你的类定义变成一个函数。（约定：大写 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 参考资料，尤其是与原型和继承相关的参考资料。