Question

我正在尝试在按下提交按钮时获取包含多个字段的表单。

如果某个字段无效，则该字段旁会显示一条消息。我可以得到一个无效的消息，但不是全部。我正在使用的功能如下。

function checkForm() {           
    document.getElementById("test").onsubmit=function(){
        var title = document.getElementById("titles");
        if (title.selectedIndex == -1) {
            return null;
        }

        var email = document.getElementById('email');
        //Regular Expression for checking email
        var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
        if (!emailRegEx.test(email.value)) {
            document.getElementById("errEmail").style.display="inline";
            return false;
        }

        if(document.getElementById("fname").value==""){
            document.getElementById("errfName").style.display="inline";
            return false;
        } 
        else {
            return true;
        }

        if(document.getElementById("lname").value==""){
            document.getElementById("errlName").style.display="inline";
            return false;
        } 
        else {
            return true;
        }       
    }   
}

下面的HTML

<form name ="reg" id="test">
   <fieldset id="controls">

     <div>
     <label for="title">Title: </label>
     <select id="titles">
         <option value="mr" selected="selected">Title</option>
         <option value="mr">Mr.</option>
         <option value="mrs">Mrs.</option>
         <option value="ms">Ms.</option>
         <option value="miss">Miss</option>
     </select>
    </div>

    <div>
      <label for="fname">First Name: </label>
      <input id="fname" type="text"><span id="errfName" class="error">* Please Enter a First Name</span>
     </div>


    <div>
      <label for="lname">Last Name: </label>
      <input id="lname" type="text"><span id="errlName" class="error">* Please Enter a Last Name</span>
     </div>


     <div>
        <label for="email">Email: </label>
        <input id="email" type="text" size="40"><span id="errEmail" class="error">* Please enter a valid email</span>
        </div>
     <div>
         <input type="submit" value="submit">
      </div>
   </fieldset>
</form>
</body>
</html>

Answer 1

试试这个：

function checkForm() { 
   var errors = [];      
   document.getElementById("test").onsubmit=function(){
    var title = document.getElementById("titles");
    if (title.selectedIndex == -1) {
        return null;
    }

    var email = document.getElementById('email');
    //Regular Expression for checking email
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
    if (!emailRegEx.test(email.value)) {
        errors.push("errEmail");
    }

    if(document.getElementById("fname").value==""){
        errors.push("errfName");
    } 

    if(document.getElementById("lname").value==""){
        errors.push("errlName");
    } 
    if(errors.length > 0 ){
        for(var i=0;i<errors.length;i++){
          document.getElementById(errors[i]).style.display="inline";
         }
         return false;
     }else{
       return true
     } 
   }   
 }

Javascript表单验证 - 无法验证多个字段

1 个答案: