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

JavaScript validation using inputs as array

本文关键字：JavaScript 验证 数组 输入      更新时间：2023-09-26
嗨，我正在尝试使用

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;
    }

类无效向字段添加红色边框。

谢谢。

我稍微

更改了您的函数以读取输入元素，如下面的 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;
}

我处理了三种输入类型

  1. 发短信
  2. 电子邮件
  3. 密码

如果需要，您可以稍后添加更多内容

编辑：错误的可能原因可能是 DOM 元素在form中不可用（如果可能，请分享HTML）。第一个循环将从表单中读取所有可用的 DOM 元素。

 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;
    }
相关文章：