Question

我有以下JavaScript源代码：

var Fname = document.getElementById("FirstName").value;
var Lname = document.getElementById("LastName").value;
var email = document.getElementById("Email").value;
var password = document.getElementById("Pass").value;
var reapeat = document.getElementById("Repeat").value;
var area = document.getElementById("selectArea").value;

如果每个变量为空（Fname == ""），有没有简单的方法可以检查？如果是，我应该怎么做？如果不是，最简单的方法是什么？

Answer 1

如果要使用循环执行此操作，则需要可循环的结构中的字段或值，例如，数组：

var fields = ["FirstName", "LastName", "Email", "Pass", "Repeat", "selectArea"];

for (var i = 0; i < fields.length; i++) {
    if (document.getElementById(fields[i]).value === "") {
        alert("Please fill in all fields.");
        break; // or do whatever you like here.
    }
 }

或者您可以在标记中为元素指定一个公共类，例如：

<input class="noblank" ...>

然后：

var fields = document.getElementsByClassName("noblank");
for (var i = 0; i < fields.length; i++) {
    if (fields[i].value === "") {
        alert("Please fill in all fields.");
        break; // or do whatever you like here.
    }
 }

基于类的方法更好一些，因为如果在html中添加更多必填字段，则根本不需要更新JS。

Answer 2

另一种解决方案是使用Object作为字典：

var obj = {
    Fname: document.getElementById("FirstName").value,
    Lname: document.getElementById("LastName").value,
    email: document.getElementById("Email").value,
    password: document.getElementById("Pass").value,
    reapeat: document.getElementById("Repeat").value,
    area: document.getElementById("selectArea").value
};
for (var key in obj) {
   if (obj[key]) { //or any other condition
      //do stuff
   }
};

Answer 3

ECMA 5版

var fields = ["FirstName", "LastName", "Email", "Pass", "Repeat", "selectArea"];

fields.some(function(value) {
    if (this.getElementById(value).value === "") {
        alert("Please fill in the blanks.");
        return true;
    }
}, document);

或者你可以构建另一个代表哪些遗失的对象，

var fields = ["FirstName", "LastName", "Email", "Pass", "Repeat", "selectArea"];
var errors = {};

fields.forEach(function(value) {
    if (this.getElementById(value).value === "") {
        errors[value] = "Please fill in the blanks.";
    }
}, document);

这样您就可以访问error对象。

Answer 4

看起来您正在尝试验证表单。您可以使用像jQuery这样的库来简化任务。

但是如果你想在纯JS中做到这一点，你可以做一些简单的事情：

function formNotEmpty() {
    var i, fields = ['FirstName', 'LastName', ... ];

    for (i = 0; i < fields.length; i += 1) {
        if (fields[i] === '' || fields === null) {
            return false;
        }
    }
    return true;
}

您可以将其设置为您想要的复杂，查询DOM以动态获取字段，这样您就不需要定义字段数组等。

请注意，我使用三等号运算符（===）而不是双精度数（==），在此处阅读原因（以及更多提示）http://www.jslint.com/lint.html

找到多个变量的值 - JS

4 个答案: