廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!doctype html> <head> <meta charset=utf-8" /> <title>表單驗證</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="jquery/jquery.js" type="text/javascript"></script> <script> $(document).ready(function() { $("form :input.required").each(function() { var $required=$("<strong class=high>*</strong>"); $(this).parent().append($required); }); $("form :input").blur(function() { var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is("#username")){ if(this.value==""||this.value.length<6){ var errorMsg='請輸入至少六位的用戶名'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg='輸入正確'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); return false; } } if($(this).is("#email")){ if(this.value==""||(this.value!==""&&!/.+@.+/.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg='請輸入正確的E―mail地址'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg='輸入正確'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } }); $("#send").click(function() { $("form .required:input").trigger('blur'); var numError=$("form .onError").length; if(numError){ return false; } alert("注冊成功，密碼已發到你的郵箱，請查收。"); }); }); </script> </head> <body> <form method="post" action=""> <div class="int"> <label for="username">用戶名:</label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">郵箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">個人資料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> </div> </form> </body> </html>總結
以上所述是小編給大家介紹的jQuery完成表單驗證的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
