jQuery表單驗證代碼與HTML

Question

嗨，我是一名學生程序員，我正在編寫和使用我已經研究過的代碼來爲我的註冊表單構建一層客戶端驗證，因爲這是我第一次完成這，我不能完全實現它的工作。如果有比我更多經驗的人想快速瀏覽HTML和Javascript，他們希望能告訴我爲什麼當我寫入表單域並提交我寫的驗證代碼沒有做任何事情時。

感謝您幫助我，繼續學習。

 <div class="content"> 
      <div id="form_wrapper" class="form_wrapper"> 
       <form class="register active" action="regprocess.php" method = "post"> 
        <h3 class="font">REGISTER</h3> 
        <div class="column"> 
         <div> 
          <label for="t1">Firstname:</label> 
          <input type="text" id="t1" name="firstname" class="required" /> 
          <span class="errorMessage"id="errormessage_firstname">This is an error</span> 
         </div> 
         <div> 
          <label for="t2">Username:</label> 
          <input type="text" id="t2" name="username" class="required" /> 
          <span class="errorMessage"id="errormessage_username">This is an error</span> 
         </div> 
         <div> 
          <label for="t3">Email:</label> 
          <input type="text" id="t3" name="email" class="required"/> 
          <span class="errorMessage"id="errormessage_email">This is an error, please give a valid email address.</span> 
         </div> 
        </div> 
        <div class="column"> 
         <div> 
          <label for="t4">Lastname:</label> 
          <input type="text" id="t4" name="lastname" class="required"/> 
          <span class="errorMessage"id="errormessage_lastname">This is an error</span> 
         </div> 
         <div> 
          <label for="p1">Password:</label> 
          <input type="password" id="p1"name ="pass" class="required" /> 
          <span class="errorMessage"id="errormessage_pass">This is an error</span> 
         </div> 
         <div> 
          <label for="p1">Re-enter Password:</label> 
          <input type="password" id="p2" name="pass" class ="required"/> 
          <span class="errorMessage" id="errormessage_pass">This is an error</span> 
         </div> 
        </div> 
        <div class="bottom"> 
         <div class="remember"> 

         </div> 
         <input type="submit" value="Register" /> 
         <a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a> 
         <div class="clear"></div> 
        </div> 
       </form> 
       <script type="text/javascript"> 

        $('form').submit(function(event){ 


         var isErrorFree = true; 
         //iterate through required form elements, check if valid 
         $('input.required',this).each(function(){ 
          if(validateElement.isValid(this) == false){ 
           isErrorFree = false; 
          }; 
         }); 
        return isErrorFree; 
        }); 

        var validateElement = { 

         isValid:function(element){ 
          var isValid = true; 
          var $element = $(element); 
          var id = $element.attr('id'); 
          var name = $element.attr('name') 
          var value = $element.val(); 

          var type = $element[0].type.toLowerCase(); 

          switch(type){ 
           case 'text': 
           case 'password': 
           if (value.length == 0 || 
            value.replace(/\s/g,'').length == 0){ isValid = false;} 
            break; 
            function emailReg2(){ 
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
            if(!emailReg.test(email)){ 
             isValid = false; 
             var method = isValid ? 'removeClass' : 'addClass'; 
            }; 
            var method = isValid ? 'removeClass' : 'addClass'; 

            $('#errorMessage_' + name)[method]('showErrorMessage'); 
            $('label[for="' + id + '"]')[method]('error'); 

            return isValid; 


          } 

        } 
        } 
        }; 

       </script> 

Answer 1

開關案例類型的文本..沒有什麼這裏...反正爲什麼不u使用jQuery的驗證插件..

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

使用方便.. ...

Answer 2

當出現錯誤時，添加「返回false」來中斷每個循環。

$('form').submit(function(event){ 
    var isErrorFree = true; 
    //iterate through required form elements, check if valid 
    $('input.required',this).each(function(){ 
     if(validateElement.isValid(this) == false){ 
      isErrorFree = false; 
      return false; 
     }; 
    }); 
    return isErrorFree; 
}); 

您的每個循環遍歷整套必需的輸入元素，並在每次迭代時更新isErrorFree變量。一旦出現驗證錯誤，您將立即退出循環。否則，isErrorFree將始終返回集合中最後一個元素的驗證結果。