HTML5表单验证
表单验证
* 验证属性
* 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>
