本文為大家分享了案例: 注冊表單驗證，供大家參考，具體內容如下
需要使用的兩張圖片：
dui.gif：
cuo.gif：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.1.12.4.js"></script> <!--jquery樣式--> <script type="text/javascript"> //email驗證 $(function(){ //input標簽獲取焦點/失去焦點時調用方法 $(":input[name='email']").blur(function(){ //獲取input的內容 var email = $(this).val(); //給定輸入內容的模板（email格式模板） var reg = //w+[@]{1}/w+[.]/w+/; //將input的內容放入到模板中，進行判斷 if(reg.test(email)){ //格式正確：輸出“用戶名可用” $(":input[name='check-email']").val("用戶名可用"); //聲明正確時調用的圖片 image1 = "dui.gif"; //將圖片放入到img標簽中 $("#img1").attr("src", image1); }else{ //格式錯誤：輸出“請填寫有效的Email地址” $(":input[name='check-email']").val("請填寫有效的Email地址"); //聲明正確時調用的圖片 image1 = "cuo.gif"; //將圖片放入到img標簽中 $("#img1").attr("src", image1); } }); }); //name驗證 $(function(){ $(":input[name='name']").blur(function(){ var name = $(this).val(); //判斷輸入內容是大于四個字符 if(name.length > 4){ $(":input[name='check-name']").val("輸入正確"); image2 = "dui.gif"; $("#img2").attr("src", image2); }else{ $(":input[name='check-name']").val("輸入信息錯誤"); image2 = "cuo.gif"; $("#img2").attr("src", image2); } }); }); //password驗證-第一次 $(function(){ $(":input[name='password-one']").blur(function(){ var name = $(this).val(); //判斷密碼是否大于6個字符 if(name.length > 6){ $(":input[name='check-password-one']").val("密碼可用"); image3 = "dui.gif"; $("#img3").attr("src", image3); }else{ $(":input[name='check-password-one']").val("密碼不可用"); image3 = "cuo.gif"; $("#img3").attr("src", image3); } }); }); //password驗證-第二次 $(function(){ $(":input[name='password-two']").blur(function(){ var name1 = $(":input[name='password-one']").val(); var name2 = $(this).val(); //首先判斷密碼是否大于6個字符 if(name2.length > 6){ //然后判斷兩次密碼是否一致 if(name2 == name1){ $(":input[name='check-password-two']").val("密碼可用"); image4 = "dui.gif"; $("#img4").attr("src", image4); }else{ $(":input[name='check-password-two']").val("密碼不可用"); image4 = "cuo.gif"; $("#img4").attr("src", image4); } }else{ $(":input[name='check-password-two']").val("密碼不可用"); image4 = "cuo.gif"; $("#img4").attr("src", image4); } }); }); </script> <!--css樣式--> <style type="text/css"> img{width: 15px; height: 15px} .left{width: 200px; text-align: right} .right{width: 400px} .bjs{background-color: limegreen} .btn{margin: 20px 0 0 300px} </style></head><body><h4 style="color: red">以下均為必填項</h4><form> //table表格樣式：邊框為1，內部填充為10，外部填充為0 <table border="1" cellpadding="10" cellspacing="0"> <tr> <td class="left">請輸入您的Email地址：</td> <td class="right"> <input class="bjs" name="email"> <img id="img1" src="cuo.gif" /> <input type="text" name="check-email" style="border: 0px" /> </td> </tr> <tr> <td class="left">設置您在當當網的昵稱：</td> <td class="right"> <input class="bjs" name="name"> <img id="img2" src="cuo.gif" /> <input type="text" name="check-name" style="border: 0px" /> </td> </tr> <tr> <td class="left">設置密碼：</td> <td class="right"> <input class="bjs" name="password-one"> <img id="img3" src="cuo.gif" /> <input type="text" name="check-password-one" style="border: 0px" /> </td> </tr> <tr> <td class="left">再次輸入您設置的密碼：</td> <td class="right"> <input class="bjs" name="password-two"> <img id="img4" src="cuo.gif" /> <input type="text" name="check-password-two" style="border: 0px" /> </td> </tr> </table> <input class="btn" type="button" value="注冊" /></form></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
