Form表單驗證: js基礎考試內容,form表單驗證,正則表達式,blur事件,自動獲取數組,以及css佈局樣式,動態清除等。完整代碼如下: 效果 如下圖所示: 【結語】 三人行,必有我師焉。 ——請多多支持,多多評論。 ...
Form表單驗證:
js基礎考試內容,form表單驗證,正則表達式,blur事件,自動獲取數組,以及css佈局樣式,動態清除等。完整代碼如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>form-lpb</title> 6 <style> 7 body { 8 background:#CCF; 9 font-size:12px; 10 } 11 .box { 12 margin:20px 50px; 13 line-height:25px; 14 } 15 .box .box_sel { 16 margin-left:25px; 17 } 18 .text { 19 text-align:right; 20 } 21 span { 22 color:#900; 23 } 24 .length { 25 width:38px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="box"> 32 <!--form star--> 33 <form action="submit.html" onsubmit="return checkAll()"> 34 <table> 35 <tr> 36 <td class="text">賬號</td> 37 <td><input type="text" id="userName" onblur="b_userName()" /></td> 38 <td><span id="span_userName"></span></td> 39 </tr> 40 <tr> 41 <td class="text"> 密碼</td> 42 <td><input type="password" id="pass" onblur="b_pass()" /></td> 43 <td> <span id="span_pass"></span></td> 44 </tr> 45 <tr> 46 <td class="text">重覆密碼</td> 47 <td><input type="password" id="pass1" onblur="b_pass1()" /></td> 48 <td> <span id="span_pass1"></span></td> 49 </tr> 50 <tr> 51 <td class="text">手機號</td> 52 <td><input type="text" id="tel" onblur="b_tel()" /></td> 53 <td> <span id="span_tel"></span></td> 54 </tr> 55 <tr> 56 <td class="text">身份證號</td> 57 <td><input type="text" id="idCard" onblur="b_idCard()" /></td> 58 <td><span id="span_idCard"></span></td> 59 </tr> 60 <tr> 61 <td class="text">出生年月日</td> 62 <td> 63 <input type="text" id="year" class="length" disabled="disabled" /> 64 <input type="text" id="month" class="length" disabled="disabled" /> 65 <input type="text" id="day" class="length" disabled="disabled" /> 66 </td> 67 </tr> 68 <tr> 69 <td class="text"> 郵箱</td> 70 <td><input type="text" id="email" onblur="b_email()" /></td> 71 <td><span id="span_email"></span></td> 72 </tr> 73 </table> 74 <div class="box_sel"> 75 愛好 76 <select> 77 <option>籃球</option> 78 <option>足球</option> 79 <option>排球</option> 80 </select> 81 地區 82 <select> 83 <option>河南</option> 84 <option>湖南</option> 85 <option>河北</option> 86 </select> 87 <br /> 88 <input type="checkbox" id="ch_box" onclick="c_box()" /> 89 是否同意 90 <a href="xieyi.html" target="_blank">公司協議</a> 91 <br /> 92 <input type="submit" id="sub" value="提交註冊" disabled="disabled" /> 93 <input type="reset" id="rst" value="重新填寫" onclick="sub_return()" /> 94 </div> 95 </form> 96 <!--end form --> 97 </div> 98 <script> 99 // 用戶名 校驗 100 function b_userName(){ 101 var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用戶名-正則表達式 102 var c_use = document.getElementById("userName").value; 103 var c_span_use = document.getElementById("span_userName"); 104 if(reg.test(c_use)){ 105 c_span_use.innerHTML="√"; 106 return true; 107 }else { 108 c_span_use.innerHTML="用戶名必須以3-9個字母開頭,可以有下劃線_,後面3-9個數字"; 109 } 110 } 111 // 密碼 校驗 112 function b_pass(){ 113 var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密碼-正則表達式 114 var c_pass = document.getElementById("pass").value; 115 var c_span_pass =document.getElementById("span_pass"); 116 if(reg.test(c_pass)){ 117 c_span_pass.innerHTML="√"; 118 return true; 119 } 120 121 else { 122 c_span_pass.innerHTML="密碼必須以3-6個英文字母開頭,後面3-9個數字"; 123 return false; 124 } 125 } 126 // 重覆密碼 校驗、 127 function b_pass1(){ 128 var cm = document.getElementById("pass1").value; 129 var cm_sp = document.getElementById("span_pass1"); 130 var c_pass = document.getElementById("pass").value; 131 if(cm==c_pass&&cm!=""){ 132 cm_sp.innerHTML="√"; 133 return true; 134 }else{ 135 cm_sp.innerHTML="請重覆密碼"; 136 return false; 137 } 138 } 139 // 手機號 校驗 140 function b_tel(){ 141 var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/; 142 var c_tel = document.getElementById("tel").value; 143 var c_span_tel = document.getElementById("span_tel"); 144 if(reg.test(c_tel)){ 145 c_span_tel.innerHTML="√"; 146 return true; 147 }else { 148 c_span_tel.innerHTML="手機號可以(+86)第一位是1,第二位是【3,5,8】,共11位數字"; 149 return false; 150 } 151 } 152 // 身份證號 校驗 153 function b_idCard(){ 154 var reg = /\d{17}\w{1}|\d{15}/; 155 var c_idCard = document.getElementById("idCard").value; 156 var c_span_idCard = document.getElementById("span_idCard"); 157 if(reg.test(c_idCard)){ 158 c_span_idCard.innerHTML="√"; 159 document.getElementById("year").value=c_idCard.substr(6,4);// 自動 獲取 年份 160 document.getElementById("month").value=c_idCard.substr(10,2);// 自動 獲取 月份 161 document.getElementById("day").value=c_idCard.substr(12,2); 162 return true; 163 }else{ 164 c_span_idCard.innerHTML="身份證格式錯誤,必須是18位數或者是15位數"; 165 document.getElementById("year").value="";// 自動 獲取 年份 166 document.getElementById("month").value="";// 自動 獲取 月份 167 document.getElementById("day").value=""; 168 return false; 169 } 170 } 171 // 郵箱 校驗 172 function b_email(){ 173 var reg = /\w+@\w+\.\w+/; 174 var c_email = document.getElementById("email").value; 175 var c_span_email = document.getElementById("span_email"); 176 if(reg.test(c_email)){ 177 c_span_email.innerHTML="√"; 178 return true; 179 }else { 180 c_span_email.innerHTML="郵箱格式錯誤,必須包含 @ 和 . "; 181 return false; 182 } 183 } 184 // 協議 校驗 185 function c_box(){ 186 var c_b = document.getElementById("ch_box"); 187 var c_sub = document.getElementById("sub"); 188 if(c_b.checked){ 189 c_sub.disabled=false; 190 }else{ 191 c_sub.disabled=true; 192 } 193 } 194 // sub_return 當點擊重新填寫時 提交 按鈕 恢復為不可用狀態 195 function sub_return(){ 196 var subt = document.getElementById("sub