表單驗證
* 驗證屬性
* required屬性 - 驗證是否為空
* pattern屬性 - 匹配正則表達式
* minlength和maxlength屬性 - 驗證最小和最大長度
* min、max和step - 驗證最小和最大值
* validity屬性
* 用法(JS) - element.validity
* 返回值 - validityState對象
* validityState對象
* 該對象提供了一系列的屬性(驗證狀態)
* 注意
* H5驗證屬性與JS邏輯驗證的區別
* JS邏輯驗證
* 性能相對比較低
* 需要專有的解析器才能解析
* H5驗證屬性
* 性能相對比較高
* 解析器不需要有切換的過程
* 瀏覽器的解析器
* HTML+CSS的解析 - 解析器
* JavaScript的解析 - 解析器
* 驗證狀態
* 基礎內容
* 驗證狀態就是validityState對象的屬性
* 驗證狀態必須與驗證屬性配合使用
* 用於替換之前人為邏輯判斷的內容
* 驗證狀態
* valueMissing狀態
* 使用 - 配合required屬性使用
* 返回值 - Boolean值
* true - 表示值為空(錯誤)
* false - 表示值不為空(正確)
* patternMismatch狀態
* 使用 - 配合pattern屬性使用
* 返回值
* true - 表示值與正則不匹配(錯誤)
* false - 表示值與正則匹配(正確)
* tooShort狀態
* 使用 - 配合minlength屬性使用
* 返回值
* true - 表示值的長度小於minlength(錯誤)
* false - 表示值的長度大於等於minlength(正確)
* tooLone狀態
* 使用 - 配合maxlength屬性使用
* 返回值
* true - 表示值的長度大於maxlength(錯誤)
* false - 表示值的長度小於等於maxlength(正確)
* 注意 - 這種情況很難出現
* 必須進行邏輯判斷 - 邏輯完整性
* rangeUnderflow狀態
* 使用 - 配合min屬性使用
* 返回值
* true - 表示值小於min
* false - 表示值大於等於min
* rangeOverflow狀態
* 使用 - 配合max屬性使用
* 返回值
* true - 表示值大於max
* false - 表示值小於等於max
* stepMismatch狀態
* 使用 - 配合step屬性使用
* 返回值
* true - 表示值與step不匹配
* false - 表示值與step匹配
* typeMismatch狀態
* 使用 - 配合email、url標簽使用
* 返回值
* true - 表示值與對應類型不匹配
* false - 表示值與對應類型匹配
* valid狀態
* 含義 - 表示值是否正確
* 返回值
* true - 表示值正確
* false - 表示值錯誤
* badInput狀態(了解)
* 含義 - 表示值輸入有誤
* customError狀態
* 含義 - 是否自定義錯誤提示信息
* 使用 - 配合setCustomValidity()方法
* setCustomValidity()方法 - 慎用
* 作用 - 用於自定義驗證錯誤提示信息
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>驗證狀態測試</title> 6 </head> 7 <body> 8 <form action="#"> 9 用戶名:<input type="text" id="user" required pattern="^[0-9]{6,12}$"/><br/> 10 密碼:<input type="text" id="pwd" minlength="6" maxlength="12"/><br/> 11 年齡:<input id="age" type="number" min="18" max="50" step="2"/><br/> 12 email:<input type="email" id="mail"><br/> 13 14 <input type="submit"/> 15 </form> 16 <script> 17 var user = document.getElementById("user"); 18 user.onblur = function(){ 19 var value = this.value; 20 /*if(value==""||value==null){ 21 //TODO 錯誤 22 }*/ 23 if(user.validity.valueMissing){ 24 console.log("用戶名不能為空.") 25 }else if(user.validity.patternMismatch){ 26 console.log("用戶名格式錯誤."); 27 } 28 } 29 30 var pwd = document.getElementById("pwd"); 31 pwd.onblur = function(){ 32 var value = pwd.value; 33 if(pwd.validity.tooShort){ 34 console.log("密碼輸入太少") 35 }else if(pwd.validity.tooLong){ 36 console.log("密碼輸入太多") 37 } 38 } 39 40 var age = document.getElementById("age"); 41 age.onblur = function(){ 42 if(age.validity.rangeUnderflow){ 43 console.log("年齡過小.") 44 }else if(age.validity.rangeOverflow){ 45 console.log("年齡過大.") 46 }else if(age.validity.stepMismatch){ 47 console.log("年齡不對.") 48 } 49 } 50 51 var mail = document.getElementById("mail"); 52 mail.onblur = function(){ 53 if(mail.validity.valid){ 54 console.log("email格式正確") 55 }else if(mail.validity.typeMismatch){ 56 console.log("email格式錯誤.") 57 } 58 } 59 </script> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>驗證屬性</title> 6 </head> 7 <body> 8 <fieldset> 9 <legend>驗證屬性</legend> 10 <form action="#"> 11 <!-- 12 TODO required屬性 13 TODO * 作用 - 驗證當前值是否為空 14 TODO * 效果 - 表單提交時驗證 15 16 TODO * (了解)返回值 - Boolean 17 TODO * true - 表示不為空 18 TODO * false - 表示為空 19 --> 20 用戶名:<input type="text" id="user" required/><br/> 21 <!-- 22 TODO pattern屬性 23 TODO * 作用 - 匹配正則表達式 24 TODO * 注意 - 不能用於驗證是否為空(required) 25 --> 26 密碼:<input type="text" pattern="^[0-9a-z]{6,8}$"><br/> 27 <!-- 28 TODO minlength和maxlength屬性 29 TODO * 注意 30 TODO * minlength屬性 31 TODO * 並不是HTML5的新屬性 32 TODO * W3C的規范中 33 TODO * 表單驗證屬性 34 TODO * maxlength 35 TODO * 輸入限制屬性 36 --> 37 個人主頁:<input type="text" id="home" minlength="5" maxlength="8"/><br/> 38 <!-- 39 TODO min、max和step屬性 40 --> 41 42 <input type="submit"/> 43 </form> 44 </fieldset> 45 <script> 46 //TODO 1.為submit按鈕綁定onclick事件 47 /* 48 TODO 正則表達式 49 TODO * 內置對象 - RegExp 50 TODO * /^[0-9a-z]{6,8}$/ 51 TODO * new RegExp() 52 */ 53 54 /* 55 JavaScript內置 56 * string\boolean\number\null 57 * String\Boolean\Number\Undefind 58 */ 59 /*var str1 = "this is string";//string 60 //字面量或直接量 61 var str2 = new String();//Object 62 63 var arr1 = [];//Object 64 var arr2 = new Array();//Object*/ 65 66 //TODO 下述哪個選項是錯誤的? 67 /*A a = [];//TODO 空數組 68 B b = {};//TODO 空對象 69 C c = //;//TODO 空正則表達式 70 D d = ();//錯誤*/ 71 72 //TODO 自調函數目前至少十幾種寫法 73 /*(function(){ 74 /!* 75 TODO 全局變局部 - 節省全局空間 76 *!/ 77 var jQuery = {}; 78 //TODO 局部對象升級到全局 79 window.jQuery = window.$ = jQuery; 80 })();//語法定義 81 +function(){}();*/ 82 </script> 83 </body> 84 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>驗證狀態</title> 6 </head> 7 <body> 8 <fieldset> 9 <legend>驗證狀態</legend> 10 <form action="#"> 11 用戶名:<input type="text" id="user" required/> 12 13 <input id="submit" type="submit"/> 14 </form> 15 </fieldset> 16 <script> 17 var submit = document.getElementById("submit"); 18 submit.onclick = function(){ 19 var user = document.getElementById("user"); 20 console.log(user.validity); 21 } 22 </script> 23 </body> 24 </html>