Question

如何查看更多输入字段？在我的示例中，我有2个输入字段，如果它们是空的，则边框应为红色。

但只有第一个边框是红色的。如何查看多个字段。

function ValidationCheck() {
    var test1 = document.forms["myForm"]["f1"].value;
    var test2 = document.forms["myForm"]["f2"].value;

    if (isEmptyOrSpaces(test1)) {
        document.getElementById('f1').style.borderColor = "red";
        return false;
    }
    else {
        document.getElementById('f1').style.borderColor = "#ccc";
    }


    if (isEmptyOrSpaces(test2)) {
        document.getElementById('f2').style.borderColor = "red";
        return false;
    }
    else {
        document.getElementById('f2').style.borderColor = "#ccc";
    }   
}

 <form name="myForm" onsubmit="return ValidationCheck()">
    <label for="l1">Label1 (*):</label>
    <input type="text" id="f1">

    <label for="l2">Label2 (*):</label>
    <input type="text" id="f2">

    <input type="submit" value="Submit">
  </form>

Answer 1

检查两个验证后，您需要return

试试这个：）

function ValidationCheck() {
    var test1 = document.forms["myForm"]["f1"].value;
    var test2 = document.forms["myForm"]["f2"].value;
    var validationOk = true;
    if (isEmptyOrSpaces(test1)) {
        document.getElementById('f1').style.borderColor = "red";
        validationOk =  false;
    } else {
        document.getElementById('f1').style.borderColor = "#ccc";
    }


    if (isEmptyOrSpaces(test2)) {
        document.getElementById('f2').style.borderColor = "red";
        validationOk = false;
    } else {
        document.getElementById('f2').style.borderColor = "#ccc";
    }
    if (!validationOk)
        return false;
}

Answer 2

这只需要使用JS吗？你可以很容易地用css完成它。

问题是如果第一个字段为空，则返回false，因此它会停止执行其余代码。如果您删除了返回并在验证结束时将其放在外面它应该可以工作。

多输入的JavaScript表单验证

2 个答案: