1

我有以下 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 == ""）？如果是，我该怎么做？如果没有，最简单的方法是什么？

4

4 回答 4

2

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

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。

于 2013-05-23T13:24:32.780 回答
1

另一种解决方案是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
   }
};
于 2013-05-23T13:27:56.580 回答
0

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对象。

于 2013-05-23T13:27:30.820 回答
0

看起来您正在尝试验证表单。您可以使用 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

于 2013-05-23T13:35:35.223 回答