Question

您好我正在尝试使用JavaScript验证我的输入，我有数组中的输入，我正在尝试使用它们来提取.value等信息并设置.className等值。这不符合我的意愿。我希望代码执行的操作是，如果我定义input[1] = document.forms["register"]["username"];然后使用input[1].value，它会解释这就好像我写了document.forms["register"]["username"].value

这是我的原始代码：

function validateForm() {
    var inputs = [];
    inputs[0] = document.forms["register"]["firstname"];
    inputs[1] = document.forms["register"]["lastname"];
    inputs[2] = document.forms["register"]["username"];
    inputs[3] = document.forms["register"]["email"];
    inputs[4] = document.forms["register"]["password"];
    inputs[5] = document.forms["register"]["confirmpassword"];

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].value == null || inputs[i].value == "") {
            alert("Highlighted fields must be filled out");
            inputs[i].className += " invalid";
            return false;

        }
    }

    return true;
}

这是我更新的代码，我不确定这是否是一个好习惯：

        function validateForm() {
        var error = false;
        var inputs = [];
            inputs[0] = document.forms["register"]["firstname"];
            inputs[1] = document.forms["register"]["lastname"];
            inputs[2] = document.forms["register"]["username"];
            inputs[3] = document.forms["register"]["email"];
            inputs[4] = document.forms["register"]["password"];
            inputs[5] = document.forms["register"]["confirmpassword"];
            console.log(inputs.length);

        for (i = 0; i < (inputs.length); i++) { 
            if (inputs[i].value == null || inputs[i].value == "") {
                error = true;
                inputs[i].className += " invalid";
                if (inputs[i] == (inputs.length - 1)) {
                    alert("Highlighted fields must be filled out");
                    return false;

                }
            }
        }

    if (error == false) {
        return true;
    }

    alert("Highlighted fields must be filled out");
    return false;
    }

该类无效会为该字段添加红色边框。

感谢。

Answer 1

我改变了你的函数以读取输入元素，如下面的plnkr链接 https://plnkr.co/edit/zHhM6lmz3XA2u4CYr9h0?p=preview

function validate() {
  var inputs = [];
  var elements = document.forms["register"].elements;
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.type === "text" || element.type === "email" || element.type === "password") {
        inputs.push(element)
    }
   }

  for (i = 0; i < inputs.length; i++) {

    if (inputs[i].value == null || inputs[i].value == "") {
      alert("Highlighted fields must be filled out");
      inputs[i].className += " invalid";
      return false;

    }
  }

  return true;
}

我已经处理了三种输入类型

文本
电子邮件
密码

如果需要，您可以稍后添加

修改：错误的可能原因可能是form内无法使用的DOM元素（如果可能，请分享HTML）。第一个循环将从表单中读取所有可用的DOM元素。

Answer 2

 function validateForm() {
        var inputs = [];
            inputs[0] = document.forms["register"]["firstname"];
            inputs[1] = document.forms["register"]["lastname"];
            inputs[2] = document.forms["register"]["username"];
            inputs[3] = document.forms["register"]["email"];
            inputs[4] = document.forms["register"]["password"];
            inputs[5] = document.forms["register"]["confirmpassword"];

        for (i = 0; i < inputs.length; i++) { 
            if (inputs[i].value == null || inputs[i].value == "") {
                alert("Highlighted fields must be filled out");
                inputs[i].className += " invalid";
                return false;

            }
        }

        return true;
    }

使用输入作为数组的JavaScript验证

2 个答案: