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

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);