如何使用对象初始值设定项验证表单？

Question

我正在使用下面的代码执行基本的表单验证，并且想要使用对象初始值设定项来实现相同的结果。我正在寻找其他编码表单验证的方法。我不确定在使用对象而不是数组时是否存在额外的优势。这种知识的缺乏是因为我对JavaScript的世界很陌生。

代码

var formID = document.forms["webform"]; 
function validateForm() { 
     var formFields = ["salutations", "fname", "lname"]; 
     var formLabel = ["Salutations", "First Name", "Last Name"]; 

     for(var i = 0; i < formFields.length; i = i + 1) { 
      if (formID[formFields[i]].value.length == 0) { 
       window.alert("The field " + formLabel[i] + " is empty"); 
       return false; 
      } 
     } 

    } 

Answer 1

OO可能是矫枉过正的。重用可以通过将formFields和formLabels完成到validateForm：

function validateForm(form, fields, labels) { 
    for(var i = 0, l=fields.length; i < l; i++) { 
     if (form[fields[i]].value.length === 0) { 
      alert("The field " + labels[i] + " is empty"); 
      return false; 
     } 
    } 
} 

你也可以通过你的需要为对象的所有变量：

function alternateValidateForm(options) { 
    var form = options.form, 
     fields = options.fields, 
     labels = options.labels; 
    // The remainder of the code is the same 
} 

但是，如果你想/需要一个OO图案然后简单地创建一个构造函数：

function Validator(fields, labels) { 
    this.fields = fields; 
    this.labels = labels; 
} 

Validator.prototype.validate = function(form) { 
    // Same dance as before 
} 

这可能则在这种方式使用：

var validator = new Validator(["salutations", "fname", "lname"], 
           ["Salutations", "First Name", "Last Name"]); 
var form = document.getElementById("webform"); 
validator.validate(form); 

Answer 2

只是一个例子。

function ValidateForm(form_id, filed_label) { 
    this.form = document.forms[form_id]; 
    this.filed_label = filed_label; 
} 

ValidateForm.prototype.validate = function() { 
    for (var filed in this.filed_label) { 
    if (this.form[filed].value.length == 0) { 
     window.alert("The field " + this.filed_label[field] + " is empty"); 
     return false; 
    } 
    } 
} 

// usage 
new ValidateForm(
    "webform", 
    { 
    salutations: "Salutations", 
    fname: "First Name", 
    lname: "Last Name" 
    } 
).validate(); 

Answer 3

JavaScript中的所有内容都是对象;然而，根据你如何使用该语言，语义是超级不同的。在这种情况下，您可以使用对象字面量（也称为单例对象）。

在此上下文中使用函数构造函数不会为您提供任何有用的东西。必要时使用构造函数模式，否则就没有必要。

希望以下内容易于理解。您还会注意到，我们将字段标题添加到标记中以实现更好的代码重用。我们可能使用了标签元素，但这是一个可以随时更改的小细节。

HTML表单：

​<form name="webform" id="webform"> 
<input type="text" id="fullname" name="fullname" title="Full Name" /> 
<input type="button" value="submit" onclick="return window.validate();" /> 
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

验证：

​​

使用：

window.validate = function() { 
    var valid = Form.validate({id: 'webform', fields: ['fullname']}); 
    console.log('Valid Form?', valid); 
} 
​ 

演示链接：http://jsfiddle.net/au2fx/