1

我正在使用下面的代码执行基本的表单验证，并希望使用对象初始化程序来实现相同的结果。我正在研究对表单验证进行编码的其他方法。我不确定使用对象而不是数组是否有额外的优势。这种知识的缺乏是因为我是 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;
            }
        }

    }
4

3 回答 3

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();
于 2012-08-03T03:39:41.827 回答
1

OO 对此可能是矫枉过正。可以通过将formFieldsand传递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);
于 2012-08-03T03:41:20.090 回答
0

JavaScript 中的一切都是对象；但是，根据您使用语言的方式，语义是非常不同的。在这种情况下，您可以使用对象文字（也称为单例对象）。

在这种情况下使用函数构造函数不会给您带来任何有用的东西。必要时一定要使用构造函数模式，否则就没有必要了。

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

表单 HTML：

​&lt;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/

于 2012-08-03T08:56:11.933 回答