如何使用對象初始值設定項驗證表單？

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/