Question

JavaScript的新手。我的功能混乱了，我想要一些有关如何正确执行此功能的指导。

此功能应根据输入字段的状态显示一条消息（来自msg[]）。当前，只有一种情况认为输入是错误的-如果输入字段为空。我想添加另一个条件（如果输入为NaN，则从另一个名为msg2[]的数组中显示适当的消息），但我不知道如何写它。我知道我可以简单地利用HTML5的'required'属性或输入type="number"，但是，为了我的个人利益，我想对该功能进行硬编码。

如何使函数在2种条件之间进行选择并显示相应数组中的相应消息？

function validateForm(someForm) {
    document.getElementById('errorMsg').innerHTML = ""; 
    var allInputs = document.getElementById("studentform").getElementsByTagName("input");
    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].name != "final-average-result" && allInputs[i].name != "final-letter-grade-result") {
            if (allInputs[i].value == "") {


                document.getElementById('errorMsg').innerHTML = msg[i];
                if (currentField) {
                    currentField.style.border = "2px solid #CCC";
                }
                allInputs[i].style.border = "2px dotted #F00";
                currentField = allInputs[i];
                allInputs[i].onclick = function () {
                    this.style.border = "2px dashed #CCC";
                }
                return;
            }
        }
    } // end for
} // end validateForm

var msg = ["Name should not be empty", "This field should not be empty",
"This 3rd field should not be empty", "The last field should not be empty."];
var msg2 = ["Invalid input", "error message here",......."]

Answer 1

您可以使用else if语句，例如

if (input != condition ){}
else if (input != condition ){}

语句if (allInputs[i].name != "final-average-result" && allInputs[i].name != "final-letter-grade-result")也不正确。您应该使用||运算符，而不是&&。 allInputs[i].name将不等于2个字符串

Answer 2

如果不是，则使用isNaN() function

function validateForm(someForm) {
  document.getElementById('errorMsg').innerHTML = ""; 
   var allInputs = 
  document.getElementById("studentform").getElementsByTagName("input");
  for (var i = 0; i < allInputs.length; i++) {
    if (allInputs[i].name != "final-average-result" && allInputs[i].name != "final- 
       letter-grade-result") {
        if (allInputs[i].value == "") {

          document.getElementById('errorMsg').innerHTML = msg[i];
            if (currentField) {
              currentField.style.border = "2px solid #CCC";
            }
            allInputs[i].style.border = "2px dotted #F00";
            currentField = allInputs[i];
            allInputs[i].onclick = function () {
              this.style.border = "2px dashed #CCC";
            }
            return;
        } else if(isNaN(allInputs[i].value)) {
            // display error
        }
      }
    } // end for
} // end validateForm

var msg = ["Name should not be empty", "This field should not be empty",
"This 3rd field should not be empty", "The last field should not be empty."];
var msg2 = ["Invalid input", "error message here",......."]

Answer 3

执行输入验证时，要考虑许多不同的可能性。有一些插件和框架等可以为您提供帮助，但您采用了相当手动的方法。但这就是重点...

我发现您的逻辑存在问题，应该在哪里开始重构解决方案。您正在隐式使用数组来保存所有输入字段的错误消息。因此，第一个输入在msg数组的第一个插槽中有一个自定义错误消息。这似乎非常脆弱，并且会在某个时候中断，您已经有一个过滤器可以从此顺序中删除两个字段，您确定要对此进行补偿吗？另外，您似乎在第一个无效字段处停止了？

在尝试验证msg2的值类型时，如果要支持其他类型的值和验证，则此逻辑将不起作用。您需要能够对不同的字段使用不同的要求，也许需要对一个字段使用多个验证条件...

您只需要制定另一种策略。与您的尝试接近的一种方法是，通过字段名称或ID将对象中的字段结构化，然后有一个相应的对象进行验证，其中字段代表特定类型错误的验证错误。

var inputFieldValidationErrorMap = {
    'first-field-name': {
        empty: 'Name should not be empty',
        wordchars: 'Name must be only valid letter chars'
    },
    'second-field-name': {
        empty: 'This field should not be empty',
        nan: 'This field must contain only numbers'
    }
}

要在当前代码中使用此代码，请编写类似

的内容

function validateForm(someForm) {
    document.getElementById('errorMsg').innerHTML = ""; 
    var allInputs = document.getElementById("studentform").getElementsByTagName("input");
    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].name != "final-average-result" && allInputs[i].name != "final-letter-grade-result") {
            var name = allInputs[i].name;
            var errorElement = document.getElementById('errorMsg');
            var validation = inputFieldValidationErrorMap[name];
            if (allInputs[i].value === "" && 'empty' in validation) {
                errorElement.innerHTML = validation.empty;
                return;
            } else if(isNaN(allInputs[i].value) && 'nan' in validation) {
                errorElement.innerHTML = validation.nan;
                return;
            }
        //... Go on here for every type of validation you support
        }
    } // end for
} // end validateForm

进一步的改进

此解决方案绝不是完美的，它也有其局限性。您还可以在输入字段上使用一些数据属性来包含您的验证要求，并且您应该将解决方案与设置正确的输入类型等结合使用，使用本机html属性以提高可用性。您应该允许每个输入显示其自己的错误，并通过表单中的所有字段进行运行验证，以使所有错误均为当前错误。还有一些框架和插件需要考虑，以确保您不会遇到麻烦。

如何在输入验证中再写一个条件？

3 个答案: