封裝表單自定義錯誤信息。（阻止默認錯誤信息提示，添加自定義錯誤信息提示）
1 前臺提交信息到後臺，兩種表單驗證： 2 1，form 表單驗證 3 2，ajax 無刷新頁面提交 4 5 表單驗證方法通常有： 6 1，瀏覽器端驗證 7 2，服務器端驗證 8 3，ajax驗證 9 4，瀏覽器和服務器雙重驗證 10 11 html5表單新增類型： 12 email,url,number,range,data(date,month,week,time,datetime,datetime-local),search,color,tel等 13 ======== 14 重點：pattern 和 list/datalist 15 表單驗證的一些特性： 16 required 必填 17 optional 選填 18 pattern 正則表達式 19 不驗證表單提交 novalidate (form屬性，寫在form中) / formnovalidate (submit屬性，即寫在提交按鈕中) 20 autocomplete 自動回填 聯想(off關閉聯想) 表單默認autocomplete聯想 21 enctype 發送信息到服務器以前，設置對錶單數據進行如何編碼，enctype="multipart/form-data" 22 是咱們在上傳文件的時候必須指定的 23 24 25 list/datalist重點： 26 <input type="text" name="" list="tips"> 27 <datalist id="tips"> 28 <option value="">111</option> 29 <option value="">111</option> 30 <option value="">111</option> 31 </datalist> 32 33 <!DOCTYPE html> 34 <html lang="en"> 35 <head> 36 <meta charset="UTF-8"> 37 <title>表單驗證pattern</title> 38 </head> 39 <body> 40 <form action="#" method="get" accept-charset="utf-8" autocomplete="off"> 41 <input type="file" id="file"> 42 <label for="">名稱：</label><input type="text" placeholder="請輸入名稱" required> 43 <label>工號：<input type="text" name="num" value="" placeholder="請輸五位數字和abcdef中的一個字母" required pattern="^\d{5}[abcdef]{1}$"></label> 44 <!-- 簡寫以下：input[type=text][list=tips]>datalist[id=tips]>option{可選}*5 --> 45 <input type="text" list="tips"> 46 <datalist id="tips"> 47 <option value="111"></option> 48 <option value="222"></option> 49 <option value="333"></option> 50 <option value="444"></option> 51 <option value="555"></option> 52 </datalist> 53 </input> 54 <input type="submit" name="" value="驗證提交"> 55 <input type="submit" name="" value="不驗證提交" formnovalidate> 56 </form> 57 </body> 58 </html> 59 60 在html5中，上傳文件時在發送數據到服務器以前，必須對錶單數據進行編碼，下列正確的： 61 62 A：text/plan,提交表單的時候，會對空格轉換爲 "+" 加號，但不對特殊字符編碼。 63 64 B： application/x-www-form-urlencoded是form表單默認的選項。 65 66 C：multipart/form-data是咱們在上傳文件的時候必須指定的。 67 68 D：而enctype="application/json"是json提交表單的聲明。 69 70 ========= 71 重點：聯想時，點擊指定值，輸入框背景變色，如何修改該背景色。其餘代碼與上例子同樣，就看工號就行。 72 解決方法二：直接在form中禁用自動聯想 autocomplete="off",再本身處理記住以前的信息。 73 <!DOCTYPE html> 74 <html lang="en"> 75 <head> 76 <meta charset="UTF-8"> 77 <title>表單驗證pattern</title> 78 <style type="text/css" media="screen"> 79 /* 工號輸入正確，屢次提交後，與工號輸入框再次得到焦點，點擊之前輸入的內容。輸入框的背景顏色變成系統默認的淡藍色/黃色。 80 修改該默認背景以下方法，爲了測試，能夠先註釋下面全部的CSS樣式。查看，必定記住必須屢次提交後才行。*/ 81 textarea:-webkit-autofill, 82 select:-webkit-autofill, 83 input:-webkit-autofill{ 84 -webkit-box-shadow:0 0 0 1000px #fff inset; 85 outline: none; 86 } 87 88 /*得到焦點時，取消默認外邊框*/ 89 input:focus,select:focus,textarea:focus{outline: none;} 90 </style> 91 </head> 92 <body> 93 <form action="#" method="get" accept-charset="utf-8" > 94 <input type="file" id="file"> 95 <label for="">名稱：</label><input type="text" placeholder="請輸入名稱" autocomplete required> 96 <label>工號：<input type="text" name="num" value="" placeholder="請輸五位數字和abcdef中的一個字母" required pattern="^\d{5}[abcdef]{1}$"></label> 97 <!-- 簡寫以下：input[type=text][list=tips]>datalist[id=tips]>option{可選}*5 --> 98 <input type="text" list="tips"> 99 <datalist id="tips"> 100 <option value="111"></option> 101 <option value="222"></option> 102 <option value="333"></option> 103 <option value="444"></option> 104 <option value="555"></option> 105 </datalist> 106 </input> 107 <select name=""> 108 <option value="">1111</option> 109 <option value="">222</option> 110 <option value="">333</option> 111 </select> 112 <input type="submit" name="" value="驗證提交"> 113 <input type="submit" name="" value="不驗證提交" formnovalidate> 114 </form> 115 </body> 116 </html> 117 ========= 118 html5 約束驗證API： 119 1, willValidate 屬性 表示若是元素的約束沒有被符合則值爲 false。 120 2, validity validityState 對象，表示元素如今所處的驗證狀態 121 3, validationMessage 用於描述與元素相關約束的失敗信息,千萬別成：validitionMassage.相差一個a。 122 4, checkValidity()方法 有一個約束條件沒有知足，則返回false，全部知足才返回true 123 <!-- checkValidity()方法的使用 修改value來測試 124 全部約束符合，返回true，不然返回false。 125 --> 126 <body> 127 <input type="email" required placeholder="請輸入郵箱" id="email" value="1111@qq.com"> 128 <input type="text" required placeholder="請輸入工號3位數字" pattern="^\d{3}" id="user" value="111"> 129 </body> 130 <script type="text/javascript"> 131 console.log(email.checkValidity()); 132 console.log(user.checkValidity()); 133 if (user.checkValidity()) { 134 console.log('用戶名輸入正確！'); 135 }else{ 136 console.log("用戶名輸入有誤，請輸入3個數字。"); 137 } 138 </script> 139 140 5, setCustomValidity(string)方法 切記是dom的屬性，不是validityState對象，設置自定義的驗證信息來覆蓋瀏覽器默認的提示信息,string自定義的提示信息 141 142 <!-- setCustomValidity("格式不對，請從新輸入！"); --> 143 <body> 144 <form action="from_submit" method="get" accept-charset="utf-8"> 145 <input type="text" required placeholder="請輸入工號3位數字" pattern="^\d{3}" id="user" required> 146 <input type="submit" onclick="checkit()"> 147 </form> 148 </body> 149 <script type="text/javascript"> 150 function checkit(){ 151 var it = document.getElementById("user"); 152 var vd = it.validity; 153 // console.log(vd.valueMissing); 154 // console.log(vd.patternMismatch); 155 if (vd.valueMissing) { 156 it.setCustomValidity("內容不能爲空！"); 157 }else{ 158 if (vd.patternMismatch) { 159 it.setCustomValidity("格式不正確，請從新輸入!"); 160 }else{ 161 it.setCustomValidity(""); 162 } 163 } 164 } 165 </script> 166 167 168 169 validity validityState 對象，表示元素如今所處的驗證狀態 170 輸出某個對象的validity，如：console.log(document.getElementById("user")); 171 172 在控制檯輸出validityState對象信息以下： 173 174 ValidityState {valueMissing: true, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …} 175 badInput: false 表示：用戶提供了一個瀏覽器不能轉換的input 176 customError: false 對應setCusotomValidity()方法，用戶自定義了錯誤信息返回ture，不然返回false. 177 patternMismatch: false 對應pattern屬性，規定用於驗證表單元素的值的正則表達式。 178 rangeOverflow: false 對應max屬性，規定number的最大值，溢出返回true，不然返回false. 179 rangeUnderflow: false 對應min屬性，規定number的最小值，溢出返回true，不然返回false. 180 stepMismatch: false 對應step屬性，規定表單元素的合法數字間隔。 181 tooLong: false 對應maxlength屬性，規定文本區域的最大長度（以字符計）。 182 tooShort: false 對應minlength屬性，規定文本區域的最小長度（以字符計）。 183 typeMismatch: false 類型不匹配，如：設置email，但輸入的是：dddd，就返回true，不然返回false。 184 valid: false 只要上下文的全部屬性返回是false，就會返回true. 185 valueMissing: true 對應required設置表單必填 186 187 188 <!--dom.validity 在控制檯輸出validityState對象信息驗證以下： --> 189 <!DOCTYPE html> 190 <html lang="en"> 191 <head> 192 <meta charset="UTF-8" /> 193 <title>Document</title> 194 </head> 195 <style type="text/css" media="screen"> 196 input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;width: 15px;height: 15px;background-color: red;} 197 198 #num1::-webkit-inner-spin-button, 199 #num1::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;} 200 </style> 201 <body> 202 <form action="" method="get" id="forms"> 203 <input type="text" id="username" required maxlength="5" minlength="2" value="22222222" placeholder="請輸入5位用戶名"> 204 <input type="email" id="email" required value="aaaaa@qq.com" placeholder="請輸入郵箱"> 205 206 <input type="text" placeholder="請輸入工號" id="num" pattern="^\d{5}[abcdef]$" value="12345cddd"> 207 <input type="number" placeholder="請輸入年齡" max="10" min="3" id="age" value="" required oninput="checkLength(this,2)" > 208 <input type="number" step="0.01" value="0.05" placeholder="請輸入數字" id="num1"> 209 210 <input type="search" placeholder="輸入搜索內容"> 211 <input type="submit" value="提交" id="submitBtn"> 212 </form> 213 <script> 214 //如下全等，不推薦直接使用id，由於容易和變量混淆，不易維護。id是h5的新屬性 215 console.log(username === document.getElementById("username")); 216 217 /*tooLong: false 對應max屬性 在控制檯查看 218 tooShort: false 對應min屬性,無論如何設置max ,min 這兩個值是恆等於false的*/ 219 console.log(username.validity); 220 221 // typeMismatch: true 對應type="email" 在控制檯查看 輸入信息類型匹配錯誤 222 console.log(email.validity); 223 224 // patternMismatch: true 對應pattern屬性，上訴默認值value="12345cddd" 不匹配pattern表達式 225 // 沒有寫required，因此空值能夠提交 valueMissing: false 對應required屬性，因此null也是一個值。 226 console.log(num.validity); 227 228 /*value > 10 對應的 rangeOverflow: true 229 value < 3 對應的 rangeUnderflow: true 230 value 沒有設置，且設置了 required 屬性，那麼 valueMissing: true，即：缺乏值 爲 真 231 控制用戶只能輸入指定的位數，maxlength="10" 這是不行的。只能使用js進行控制。 232 */ 233 console.log(age.validity); 234 // 使用js進行控制只能輸入的位數 235 function checkLength(obj,length){ 236 obj.value=obj.value.substr(0,length); 237 console.log(obj.value);//控制檯輸出該值 238 } 239 240 /*要求保留兩位小數，只能設置 step="0.01"，這樣提交後臺時才能保留兩位小數。 241 若是隻設置 value="0.01",那麼系統提交後臺時，會去掉後面小數，只保留整數。謹記！ 242 step 對應 stepMismatch:false 基本是恆等的 243 */ 244 console.log(num1.validity); 245 </script> 246 </body> 247 </html> 248 249 250 <!-- 經過輸入信息不匹配，輸出不匹配信息提示，DOM.validationMessage --> 251 <!DOCTYPE html> 252 <html lang="en"> 253 <head> 254 <meta charset="UTF-8" /> 255 <title>Document</title> 256 </head> 257 <body> 258 <form action="" method="get" id="forms"> 259 <input type="text" id="username" required> 260 <input type="email" placeholder="請輸入郵箱" value="aaaa" required> 261 <input type="url" placeholder="請輸入網址" value="sdfa" required> 262 <input type="submit" value="提交" id="submitBtn"> 263 </form> 264 <script> 265 var form = document.getElementById("forms"), 266 val = null; 267 submitBtn = document.getElementById("submitBtn"); 268 submitBtn.addEventListener("click", function() { 269 var invalidFields = form.querySelectorAll(":invalid"); 270 for (var i = 0; i < invalidFields.length; i++) { 271 console.log(invalidFields[i].validationMessage); 272 } 273 }); 274 </script> 275 </body> 276 </html> 277 278 ============ 279 280 HTML5自帶驗證美化，涉及的僞類及CSS選擇器 281 1，:required 和 :optional 必填/選填 282 2，:in-range 和 :out-of-range 在範圍以內/不在範圍以內 一般與type="number" max 和 min 相對應 283 3，:valid 和 :invalid 符合驗證/不符合驗證 284 4，:read-only 和 :read-write 只讀/讀寫 285 <div contenteditable="true">能夠讀寫的div，contenteditable是能夠被 :read-write 匹配的,當值爲false時，則不能寫</div> 286 287 288 <!-- 使用僞類 :required 和 :optional 美化表單的基本樣式 --> 289 去除webkit內核中表單的默認樣式，通常用 -webkit-appearance: none。再進行自定義設置 290 291 <!DOCTYPE html> 292 <html lang="en"> 293 <head> 294 <meta charset="UTF-8"> 295 <title>經常使用表單樣式</title> 296 </head> 297 <style type="text/css" media="screen"> 298 /*設置容器屬性*/ 299 .container{max-width: 400px;margin: 20px auto;} 300 301 /*表單公共樣式*/ 302 input,select,textarea{width: 240px;line-height:20px;margin: 10px 0;border: 1px solid #999;} 303 label{color:#999;margin-left: 10px;} 304 input[type="radio"]{width: 20px;} 305 input[type="radio"]+label:after{content: ""!important;} 306 307 /*在search搜索框輸入內容時，移除右邊的叉號按鈕樣式 308 在PC端徹底沒問題，在手機端-webkit-有可能存在 一些問題，因此手機端不推薦使用該種方式，儘可能使用原生代碼進行操做 309 */ 310 #search1::-webkit-search-cancel-button{-webkit-appearance: none;width: 15px;height: 15px;background-color: red;} 311 312 /*必填/選填表單的右邊框樣式*/ 313 input:required,textarea:required{border-right: 3px solid #aa0088;} 314 input:optional,select:optional{border-right: 3px solid #999;} 315 316 /*必填/選填表單後面第一個兄弟label 添加after僞類*/ 317 input:required+label::after{content: "(必填)"} 318 input:optional+label::after{content: "(選填)"} 319 320 /*清除表單獲取焦點時的默認外邊框*/ 321 input:focus,select:focus,textarea:focus{outline: none;} 322 323 /*必填/選填表單獲取焦點時的樣式*/ 324 input:required:focus,textarea:required:focus{box-shadow: 0 0 3px 1px #aa0088;} 325 input:optional:focus,select:optional:focus{box-shadow: 0 0 3px 1px #999;} 326 327 /*提交按鈕樣式*/ 328 input[type="submit"]{background: #ccc;padding: 3px 0;} 329 input[type="submit"]:hover{background: #aa0088;color: #fff} 330 331 /*文本域不可改變寬高*/ 332 textarea{resize:none;} 333 </style> 334 <body> 335 <div class="container"> 336 <form action="#" method="get" accept-charset="utf-8"> 337 <input type="name" required><label for="">名稱</label> 338 339 <input type="email" required id="email"><label for="">郵箱</label> 340 <input type="tel" ><label for="">電話</label> 341 <input type="url" ><label for="">網址</label> 342 <input type="search" id="search1" placeholder="輸入時，修改叉號圖標"> 343 <input type="search" id="search2" placeholder="輸入時，有叉號的輸入框"> 344 <div> 345 <label for="man">男：</label><input type="radio" id="man" name="sex"> 346 <label for="woman">女：</label><input type="radio" id="woman" name="sex"> 347 </div> 348 <select name="" > 349 <option value="">非必填選項一</option> 350 <option value="">非必填選項二</option> 351 <option value="">非必填選項三</option> 352 <option value="">非必填選項四</option> 353 </select> 354 <textarea name="" rows="5" cols="30" placeholder="留言(選填31)" required></textarea> 355 <input type="submit" value="表單提交"> 356 </form> 357 </div> 358 <script type="text/javascript"> 359 //如下兩個是全等的，可是極力不推薦直接使用id進行操做，1，容易與變量混淆，不易閱讀和維護。2，id 是html5的新屬性。 360 console.log(document.getElementById("email") === email); 361 console.log(document.getElementById("email") === 'email'); 362 363 // 輸出指定對象的validity屬性對象，validity是一個validityState對象 364 var ema = document.getElementById("email"); 365 console.log(ema.validity); 366 </script> 367 </body> 368 </html> 369 ========= 370 注意點： 371 input[type="email"]:focus:invalid~label::after{content: "格式不對！";color: red;} 372 這裏是有順序的：先獲取焦點，再驗證不符合的input後面的label 後面添加樣式 373 374 <!-- 使用僞類 :valid 和 :invalid 符合驗證/不符合驗證 美化表單的基本樣式 --> 375 <!DOCTYPE html> 376 <html lang="en"> 377 <head> 378 <meta charset="UTF-8"> 379 <title>僞類 :valid 和 :invalid</title> 380 <style type="text/css" media="screen"> 381 .container{position: relative;margin: 200px;} 382 input[type="email"]{width: 140px;height: 30px;line-height: 30px;border: 1px solid #999;text-indent: 36px;transition: all .3s;outline: none;border-radius: 5px;} 383 span.title{position: absolute;left: 2px;height: 30px;line-height: 30px;transition: all .3s;} 384 /*鼠標懸浮，得到焦點時的操做*/ 385 input[type="email"]:focus,input[type="email"]:hover{text-indent: 5px;} 386 input[type="email"]:focus+span.title,input[type="email"]:hover+span.title{transform: translateX(-120%);} 387 388 /*使用僞類 :valid / :invalid 符合驗證 / 不符合驗證來寫CSS*/ 389 input[type="email"]:valid~label::after{content:"格式正確！";color: green;} 390 input[type="email"]:valid{border: 1px solid green;} 391 input[type="email"]:focus:invalid~label::after{content: "格式不對！";color: red;} 392 input[type="email"]:focus:invalid{border: 1px solid red;} 393 </style> 394 </head> 395 <body> 396 <div class="container"> 397 <input type="email" required placeholder="請輸入郵箱" id="email"> 398 <span class="title">郵箱:</span> 399 <label for="email"></label> 400 </div> 401 </body> 402 </html> 403 404 ======== 405 406 HTMLL5 自帶美化驗證 之 事件篇 407 1，oninput事件 408 2，oninvalid事件 409 3，onchange事件 410 411 注意點： 412 1，input表單前面的label 對齊，能夠把label設置成行內跨元素，設置width。label內容便可對齊。 413 2，給input設置背景圖片，做爲必填圖標的設置。 414 3，oninput/oninvalid 事件 415 oninput="this.setCustomValidity('')" 表示輸入時觸發事件，修改默認提示信息爲空。 416 oninvalid="this.setCustomValidity('請輸入正確手機號碼')" 進行表單驗證不經過，直接修改提示信息 417 4，小技巧： select 第一個option沒有做爲選項時，必定要把value設置爲空，不然樣式設置會出現異常。 418 <select name="know" id="know" required oninvalid="this.setCustomValidity('請在下列選項中選擇一項：')"> 419 <option value="">==請選擇==</option> 420 <option value="2">搜索引擎</option> 421 <option value="3">朋友圈</option> 422 </select> 423 424 用戶輸入或者值發生變化時，會馬上觸發什麼事件：B 425 A：onchange事件雖然觸發值會發生變化，但不是馬上觸發，要鼠標失去焦點時才能觸發。 426 B：oninput會在值發生變化時立馬觸發 。 427 C：oninvalid是在不符合驗證的時候觸發。 428 D：onfocus是在得到焦點的時候觸發 。 429 430 431 432 <!DOCTYPE html> 433 <html lang="en"> 434 <head> 435 <meta charset="UTF-8"> 436 <title>Document</title> 437 <style> 438 .onelist{margin: 10px} 439 /*只要涉及到對齊問題，均可以使用display屬性來調整，這裏的label是最典型的例子*/ 440 .onelist label{width: 80px;display: inline-block;} 441 .onelist input,.onelist select{height:25px;line-height: 25px;width: 220px;border-radius: 3px;border: 1px solid #e2e2e2;padding: .3em .5em;} 442 443 /* input:required,select:required{background: #fff url(img/star.jpg) no-repeat 90% center;} 444 input:required:valid,select:required:valid{box-shadow: 0 0 0 3px green;background: #fff url(img/right.png) no-repeat 90% center;border-color: green;} 445 input:focus:invalid,select:focus:invalid{box-shadow: 0 0 0 3px red;background: #fff url(img/error.png) no-repeat 90% center;border-color: red; outline: 1px solid red;} */ 446 select:required, 447 input:required, 448 textarea:required { 449 background: #fff url(img/star.jpg) no-repeat 90% center; 450 } 451 452 select:required:valid, 453 input:required:valid, 454 textarea:required:valid { 455 background: #fff url(img/right.png) no-repeat 90% center; 456 box-shadow: 0 0 5px #5cd053; 457 border-color: #28921f; 458 } 459 460 select:focus:invalid, 461 input:focus:invalid, 462 textarea:focus:invalid { 463 background: #fff url(img/error.png) no-repeat 90% center; 464 box-shadow: 0 0 5px red; 465 border-color: red; 466 outline: red solid 1px; 467 } 468 </style> 469 </head> 470 <body> 471 <form action="#" class="myform"> 472 <div class="onelist"> 473 <label for="UserName">手機號：</label> 474 <input type="text" required id="UserName" name="UserName" placeholder="請輸入手機號" pattern="^1[0-9]{10}$" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('請輸入正確手機號碼')"> 475 </div> 476 <div class="onelist"> 477 <label for="Password">密碼：</label> 478 <input type="password" name="Password" id="Password" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="6~20位" required oninvalid="this.setCustomValidity('請輸入正確密碼！')" oninput="this.setCustomValidity('')" onchange="checkpassword()"> 479 </div> 480 <div class="onelist"> 481 <label for="Repassword">確認密碼：</label> 482 <input type="password" name="Repassword" id="Repassword" placeholder="確認密碼" required oninput="this.setCustomValidity('')" onchange="checkpassword()"> 483 </div> 484 <div class="onelist"> 485 <label for="know">瞭解方式：</label> 486 <select name="know" id="know" required oninvalid="this.setCustomValidity('請在下列選項中選擇一項：')"> 487 <option value="">==請選擇==</option> 488 <option value="2">搜索引擎</option> 489 <option value="3">朋友圈</option> 490 <option value="4">朋友推廣</option> 491 <option value="5">廣告投放</option> 492 </select> 493 </div> 494 <div class="onelist"> 495 <input type="submit" value="提 交"> 496 </div> 497 </form> 498 <script type="text/javascript"> 499 function checkpassword(){ 500 var pwd1 = document.getElementById('Password'), 501 pwd2 = document.getElementById('Repassword'); 502 if (pwd1.value != pwd2.value) { 503 pwd1.setCustomValidity('兩次密碼輸入不一致，請從新輸入！'); 504 }else{ 505 pwd1.setCustomValidity(''); 506 } 507 } 508 </script> 509 </body> 510 </html> 511 512 ========= 513 514 輸出：用戶輸入信息不匹配的信息提示。：validationmessage 515 <!DOCTYPE html> 516 <html lang="en"> 517 <head> 518 <meta charset="UTF-8" /> 519 <title>Document</title> 520 </head> 521 <body> 522 <form action="" method="get" id="forms"> 523 <input type="text" id="username" required> 524 <input type="email" placeholder="請輸入郵箱" required> 525 <input type="url" placeholder="請輸入網址" required> 526 <input type="submit" value="提交" id="submitBtn"> 527 </form> 528 <script> 529 var form = document.getElementById("forms"), 530 val = null; 531 submitBtn = document.getElementById("submitBtn"); 532 submitBtn.addEventListener("click", function() { 533 var invalidFields = form.querySelectorAll(":invalid"); 534 for (var i = 0; i < invalidFields.length; i++) { 535 console.log(invalidFields[i].validationMessage); 536 } 537 }); 538 </script> 539 </body> 540 </html> 541 542 ========= 543 544 <!-- H5表單美化，修改默認氣泡 --> 545 重點： 546 一，表單提交後，發生事件順序以下： 547 （1）submit按鈕的click事件，若取消默認事件，則終止 548 （2）html5表單驗證和提示，若表單驗證不經過，則提示第一個不合法輸入，並終止 549 （3）form表單的submit事件，若取消默認事件，則終止 550 因此，HTML5自帶的驗證，發生在表單的onsubmit事件以前，自定義以前必須阻止瀏覽器默認錯誤信息提示。 551 552 二，封裝自定義錯誤信息氣泡提示，能夠無限調用。 553 554 三，調用時必須知足三個條件， 555 1，寫好錯誤信息樣式 .error-message 樣式。 556 2，獲取表單對象 form. 557 3，獲取提交按鈕對象 submitBtn. 558 559 560 谷歌瀏覽器29版本以前，後面廢棄了，用下面僞元素修改默認氣泡樣式： ::-webkit-validation-bubble 561 1，使用第三方插件 562 2，本身建立氣泡 563 a,阻止默認氣泡 564 b,建立新的氣泡 565 566 <!DOCTYPE html> 567 <html lang="en"> 568 <head> 569 <meta charset="UTF-8"> 570 <title>H5表單美化，修改默認氣泡</title> 571 <style> 572 .oneline{line-height: 1.5;margin: 10px auto;} 573 .oneline label{width: 100px;text-indent: 15px;font-size: 14px;font-family: "微軟雅黑";display: inline-block;} 574 .oneline .sinput{width: 60%;height: 30px;border-radius: 6px;border: 1px solid #e2e2e2;} 575 .oneline input[type="submit"]{margin-left: 20px; width: 100px;height: 30px;border: 0;background-color: #5899d0;color: #fff;font-size: 14px;border-radius: 6px;} 576 .error-message{color: red;font-size: 12px;text-indent: 108px;} 577 </style> 578 </head> 579 <body> 580 <form action="#" id="forms"> 581 <div class="oneline"> 582 <label for="name">用戶名：</label> 583 <input type="text" id="name" class="sinput" name="name" required> 584 </div> 585 <div class="oneline"> 586 <label for="email">郵箱：</label> 587 <input type="email" id="email" class="sinput" name="email" required> 588 </div> 589 <div class="oneline"> 590 <input type="submit" id="thesubmit" value="提 交"> 591 </div> 592 </form> 593 <script type="text/javascript"> 594 595 // 自定義封裝表單氣泡,能夠無限調用 596 //封裝表單自定義錯誤信息提示 (阻止表單默認信息提示，添加自定義錯誤信息提示) 597 function replaceInvalidityUi(form,submitBtn){ 598 //阻止表單驗證不經過時觸發的默認事件 599 form.addEventListener('invalid',function(event){ 600 event.preventDefault(); 601 },true) 602 603 //阻止提交按鈕提交時觸發的默認事件 604 form.addEventListener('submit',function(event){ 605 event.preventDefault(); 606 },true) 607 608 //監聽提交按鈕的單擊事件 609 submitBtn.addEventListener("click", function(event) { 610 var inValidityField = form.querySelectorAll(":invalid"),//全部驗證不經過的對象 611 errorMessage = form.querySelectorAll(".error-message"),//全部錯誤信息，瀏覽器默認錯誤信息類名 612 parent; 613 614 //移除全部默認錯誤信息提示 615 for (var i = 0; i < errorMessage.length; i++) { 616 errorMessage[i].parentNode.removeChild(errorMessage[i]); 617 } 618 //添加自定義錯誤信息提示，只有不符合驗證的纔會添加錯誤信息，經過驗證的input後面不會添加錯誤信息 619 for (var i = 0; i < inValidityField.length; i++) { 620 parent = inValidityField[i].parentNode; 621 parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>") 622 } 623 //若是存在錯誤信息，則直接在第一個錯誤信息的input位置獲取焦點。 624 if (inValidityField.length > 0) { 625 inValidityField[0].focus(); 626 } 627 }) 628 } 629 630 var submitBtn = document.getElementById("thesubmit"); 631 var form = document.getElementById("forms"); 632 replaceInvalidityUi(form,submitBtn); 633 </script> 634 </body> 635 </html> 636 637 ============ 638 關於 element.insertAdjacentHTML(position,text); 給element 相鄰的 位置添加內容 639 adjacent 英[əˈdʒeɪsnt] 與…毗連的; 鄰近的; 640 641 <!DOCTYPE html> 642 <html lang="en"> 643 <head> 644 <meta charset="UTF-8"> 645 <title>Document</title> 646 <style> 647 #one{background-color: red;color: #fff;} 648 ol{ 649 border: 1px solid #999; 650 } 651 .love{color: blue} 652 </style> 653 </head> 654 <body> 655 <div class="container"> 656 <div>內容1</div> 657 <div>內容2</div> 658 <div id="one">內容3</div> 659 <div>內容4</div> 660 <div>內容5</div> 661 <div>內容6</div> 662 </div> 663 <div> 664 <hr> 665 <!-- 給某個dom元素的指定位置添加內容 --> 666 element.insertAdjacentHTML(position, text); 667 'beforebegin': Before the element itself. 在該元素前面添加內容(外部添加內容)<br/> 668 'afterbegin': Just inside the element, before its first child.在該元素內部 第一個子元素前面 添加內容<br/> 669 'beforeend': Just inside the element, after its last child.在該元素內部 最後一個子元素後面 添加內容<br/> 670 'afterend': After the element itself.在該元素後面添加內容(外部添加內容) 671 </div> 672 <script type="text/javascript"> 673 var one = document.querySelector('#one'); 674 one.insertAdjacentHTML('beforebegin',"<b class='love'>"+"beforebegin"+'</b>'); 675 one.insertAdjacentHTML('afterbegin',"<b class='love'>"+"afterbegin"+'</b>'); 676 one.insertAdjacentHTML('beforeend',"<b class='love'>"+"beforeend"+'</b>'); 677 one.insertAdjacentHTML('afterend',"<b class='love'>"+"afterend"+'</b>'); 678 </script> 679 </body> 680 </html>
相關文章
- 1. HTML5自定義表單驗證錯誤提示信息
- 2. cas5.2.6單點登陸-自定義錯誤信息提示
- 3. chromedriver錯誤信息提示
- 4. Form自定義錯誤信息
- 5. asp.net自定義錯誤信息處理
- 6. 用err.raise自定義錯誤信息
- 7. Flask_restful 之 自定義錯誤信息
- 8. asp.net web.config 自定義錯誤信息
- 9. Ruby On Rails 自定義錯誤頁面的顯示信息
- 10. idea2019 複製錯誤提示信息
- 更多相關文章...
- • 錯誤處理 - RUST 教程
- • PHP PDO 錯誤與錯誤處理 - PHP參考手冊
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
