多个字段的错误消息验证问题答案

【问题标题】：Error message validation issue on multiple fields多个字段的错误消息验证问题
【发布时间】：2017-12-24 10:55:21
【问题描述】：

我正在尝试使用简单的 JavaScript 代码对多个字段进行表单验证。

我面临的问题是，如果我删除 return，那么代码就可以正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript form validation - checking all numbers</title>
    <style type="text/css">
    li {
        list-style-type: none;
        font-size: 16pt;
    }
    .mail {
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 400px;
        background : #D8F1F8;
        border: 1px soild silver;
    }
    .mail h2 {
        margin-left: 38px;
    }
    input {
        font-size: 20pt;
    }
    input:focus, textarea:focus{
        background-color: lightyellow;
    }
    input submit {
        font-size: 12pt;
    }
    .rq {
        color: #FF0000;
        font-size: 10pt;
    }
    </style>


</head>
 <body onload='document.form1.text1.focus()'>
    <div class="mail">
        <h2>Form Valiodation</h2>
        <form name="form1" action="#">
            <ul>
                <!-- enter number in following -->
                <li>
                    Enter Number:
                </li>
                <li><input type='text' name='text1'/></li>
                <li class="rq">
                    *Enter numbers only.
                    <p id="error"></p>
                </li>
                <li>&nbsp;</li>
                <!-- ***************** -->
                <!-- enter name in following -->
                <li>
                    Enter Name:
                </li>
                <li id="myList">
                    <input type='text' name='text2'/>
                    <p id="error2"></p>
                </li>
                <li class="rq">
                    *Enter alphabets only.
                </li>
                <!-- ***************** -->
                <li>&nbsp;</li>
                <input type="submit" name="submit" value="Submit" onclick="allVal(event)" />
                <li>&nbsp;</li>

            </ul>
        </form>
    </div>
     <script type="text/javascript">
     function allVal(event) {

        event.preventDefault();
        var numbers = /^[0-9]+$/;
        var letters = /^[A-Za-z]+$/;


        /* matching the number as follows */
        var matchNum = document.form1.text1.value;
        if(matchNum.match(numbers)) {
            document.getElementById("error").innerHTML="success";
            return true;
        } else if(matchNum.match(letters)) {
            document.getElementById("error").innerHTML="only numbers allowed";
            return false;
        } else {
            document.getElementById("error").innerHTML="please enter valid numbers";
            return false;
        }

        /* matching the name as follows */
        var matchName = document.form1.text2.value;
        if(matchName.match(letters)) {
            document.getElementById("error2").innerHTML="success";
            return true;
        } else {
            document.getElementById("error2").innerHTML="error";
            return false;
        }


    }

     </script>
</body>
</html>

【问题讨论】：

您的期望/期望是什么？要在这些字段上显示所有错误消息，还是只显示第一个验证失败？

标签： javascript validation message

【解决方案1】：

当您从函数返回时，代码块将终止进一步执行。
设置var isValid = true; 并在每个if..else 中更改其值根据条件阻止，最后return isValid;。

演示 -

function allVal(event) {
  var isValid = true;
  event.preventDefault();
  var numbers = /^[0-9]+$/;
  var letters = /^[A-Za-z]+$/;


  /* matching the number as follows */
  var matchNum = document.form1.text1.value;
  if (matchNum.match(numbers)) {
    document.getElementById("error").innerHTML = "success";
    isValid = true;
  } else if (matchNum.match(letters)) {
    document.getElementById("error").innerHTML = "only numbers allowed";
    isValid = false;
  } else {
    document.getElementById("error").innerHTML = "please enter valid numbers";
    isValid = false;
  }

  /* matching the name as follows */
  var matchName = document.form1.text2.value;
  if (matchName.match(letters)) {
    document.getElementById("error2").innerHTML = "success";
    isValid = true;
  } else {
    document.getElementById("error2").innerHTML = "error";
    isValid = false;
  }

  return isValid;

}

li {
  list-style-type: none;
  font-size: 16pt;
}

.mail {
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 400px;
  background: #D8F1F8;
  border: 1px soild silver;
}

.mail h2 {
  margin-left: 38px;
}

input {
  font-size: 20pt;
}

input:focus,
textarea:focus {
  background-color: lightyellow;
}

input submit {
  font-size: 12pt;
}

.rq {
  color: #FF0000;
  font-size: 10pt;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>JavaScript form validation - checking all numbers</title>
</head>

<body onload='document.form1.text1.focus()'>
  <div class="mail">
    <h2>Form Valiodation</h2>
    <form name="form1" action="#">
      <ul>
        <!-- enter number in following -->
        <li>
          Enter Number:
        </li>
        <li><input type='text' name='text1' /></li>
        <li class="rq">
          *Enter numbers only.
          <p id="error"></p>
        </li>
        <li>&nbsp;</li>
        <!-- ***************** -->
        <!-- enter name in following -->
        <li>
          Enter Name:
        </li>
        <li id="myList">
          <input type='text' name='text2' />
          <p id="error2"></p>
        </li>
        <li class="rq">
          *Enter alphabets only.
        </li>
        <!-- ***************** -->
        <li>&nbsp;</li>
        <input type="submit" name="submit" value="Submit" onclick="allVal(event)" />
        <li>&nbsp;</li>

      </ul>
    </form>
  </div>
</body>

</html>

【讨论】：