Form表單驗證：
js基礎考試內容，form表單驗證，正則表達式，blur事件，自動獲取數組，以及css布局樣式，動態清除等。完整代碼如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { background:#CCF; font-size:12px; } .box { margin:20px 50px; line-height:25px; } .box .box_sel { margin-left:25px; } .text { text-align:right; } span { color:#900; } .length { width:38px; } </style> </head> <body> <div class="box"> <!--form star--> <form action="submit.html" onsubmit="return checkAll()"> <table> <tr> <td class="text">賬號</td> <td><input type="text" id="userName" onblur="b_userName()" /></td> <td><span id="span_userName"></span></td> </tr> <tr> <td class="text"> 密碼</td> <td><input type="password" id="pass" onblur="b_pass()" /></td> <td> <span id="span_pass"></span></td> </tr> <tr> <td class="text">重復密碼</td> <td><input type="password" id="pass1" onblur="b_pass1()" /></td> <td> <span id="span_pass1"></span></td> </tr> <tr> <td class="text">手機號</td> <td><input type="text" id="tel" onblur="b_tel()" /></td> <td> <span id="span_tel"></span></td> </tr> <tr> <td class="text">身份證號</td> <td><input type="text" id="idCard" onblur="b_idCard()" /></td> <td><span id="span_idCard"></span></td> </tr> <tr> <td class="text">出生年月日</td> <td> <input type="text" id="year" class="length" disabled="disabled" /> <input type="text" id="month" class="length" disabled="disabled" /> <input type="text" id="day" class="length" disabled="disabled" /> </td> </tr> <tr> <td class="text"> 郵箱</td> <td><input type="text" id="email" onblur="b_email()" /></td> <td><span id="span_email"></span></td> </tr> </table> <div class="box_sel"> 愛好 <select> <option>籃球</option> <option>足球</option> <option>排球</option> </select> 地區 <select> <option>河南</option> <option>湖南</option> <option>河北</option> </select> <br /> <input type="checkbox" id="ch_box" onclick="c_box()" /> 是否同意 <a href="xieyi.html" target="_blank">公司協議</a> <br /> <input type="submit" id="sub" value="提交注冊" disabled="disabled" /> <input type="reset" id="rst" value="重新填寫" onclick="sub_return()" /> </div> </form> <!--end form --> </div> <script> // 用戶名 校驗 function b_userName(){ var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用戶名-正則表達式 var c_use = document.getElementById("userName").value; var c_span_use = document.getElementById("span_userName"); if(reg.test(c_use)){ c_span_use.innerHTML="√"; return true; }else { c_span_use.innerHTML="用戶名必須以3-9個字母開頭，可以有下劃線_，后面3-9個數字"; } } // 密碼 校驗 function b_pass(){ var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密碼-正則表達式 var c_pass = document.getElementById("pass").value; var c_span_pass =document.getElementById("span_pass"); if(reg.test(c_pass)){ c_span_pass.innerHTML="√"; return true; } else { c_span_pass.innerHTML="密碼必須以3-6個英文字母開頭，后面3-9個數字"; return false; } } // 重復密碼 校驗、 function b_pass1(){ var cm = document.getElementById("pass1").value; var cm_sp = document.getElementById("span_pass1"); var c_pass = document.getElementById("pass").value; if(cm==c_pass&&cm!=""){ cm_sp.innerHTML="√"; return true; }else{ cm_sp.innerHTML="請重復密碼"; return false; } } // 手機號 校驗 function b_tel(){ var reg = /^(/+86)?[1][3,5,8][0-9]{9}$/; var c_tel = document.getElementById("tel").value; var c_span_tel = document.getElementById("span_tel"); if(reg.test(c_tel)){ c_span_tel.innerHTML="√"; return true; }else { c_span_tel.innerHTML="手機號可以（+86）第一位是1，第二位是【3,5,8】，共11位數字"; return false; } } // 身份證號 校驗 function b_idCard(){ var reg = //d{17}/w{1}|/d{15}/; var c_idCard = document.getElementById("idCard").value; var c_span_idCard = document.getElementById("span_idCard"); if(reg.test(c_idCard)){ c_span_idCard.innerHTML="√"; document.getElementById("year").value=c_idCard.substr(6,4);// 自動 獲取 年份 document.getElementById("month").value=c_idCard.substr(10,2);// 自動 獲取 月份 document.getElementById("day").value=c_idCard.substr(12,2); return true; }else{ c_span_idCard.innerHTML="身份證格式錯誤，必須是18位數或者是15位數"; document.getElementById("year").value="";// 自動 獲取 年份 document.getElementById("month").value="";// 自動 獲取 月份 document.getElementById("day").value=""; return false; } } // 郵箱 校驗 function b_email(){ var reg = //w+@/w+/./w+/; var c_email = document.getElementById("email").value; var c_span_email = document.getElementById("span_email"); if(reg.test(c_email)){ c_span_email.innerHTML="√"; return true; }else { c_span_email.innerHTML="郵箱格式錯誤，必須包含 @ 和 . "; return false; } } // 協議 校驗 function c_box(){ var c_b = document.getElementById("ch_box"); var c_sub = document.getElementById("sub"); if(c_b.checked){ c_sub.disabled=false; }else{ c_sub.disabled=true; } } // sub_return 當點擊重新填寫時 提交 按鈕 恢復為不可用狀態 function sub_return(){ var subt = document.getElementById("sub"); subt.disabled=true; var span_clean = document.getElementsByTagName("span"); for(var i=0;i<=span_clean.length;i++){ var span1 = span_clean[i]; span1.innerHTML= ""; } } // 整體 校驗 function checkAll(){ var c1 =b_userName(); var c2 =b_pass(); var c3 =b_tel(); var c4 =b_idCard(); var c5 =b_email(); if(c1&&c2&&c3&&c4&&c5){ return true; }else{ return false; } } </script> </body></html>效果如下圖所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
