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

只是一个例子。

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 2

对于这个，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 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>

验证：

var Form = Form || {};

Form.validate = function (config){
    var form  = document.getElementById(config.id);
    var valid = true;

    config.fields.forEach(function(field){
        if (!form[field].value.length) {valid = false;}
    });

    return valid;
};

使用：

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

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

如何使用对象初始化程序验证表单？

3 个答案: