HTML5的表单验证实例
HTML5新增加的表单验证可以大大减少你对JavaScript代码的依赖,并且进行丰富的客户端校验,下面提供两个例子。
1.HTML5客户端校验:checkValidity方法
checkValidity方法可以用于检验你的输入是否合法,合法时返回true,否则返回false。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5客户端校验:checkValidity方法</title> </head> <script type="text/javascript"> var check=function() { return commonCheck("birth","生日","字段必须是有效的日期!")&&commonCheck("email","邮箱","字段必须是有效的邮箱!"); } var commonCheck=function(fileid,filname,tip) { //获取目标对象 var targetElement=document.getElementById(fileid); //如果目标对象为空 if(targetElement.value.trim()=="") { alert(filname+"字段必须填写!"); return false; } //调用checkValidity方法执行输入校验 else if(!targetElement.checkValidity()) { alert(filname+tip); return false; } return true; } </script> <body> <form> 生日:<input type="date" id="birth" name="birth"/><br> 邮箱:<input type="email" id="email" name="email"/><br> <input type="submit" value="提交" onClick="return check();"/> </form> </body> </html>
2.自定义错误提示:setCustomValidity方法
可惜的是现在很多浏览器对此方法的支持不太完善,需要刷新页面之后才可以重新输入正确的值,否则错误提示会一直存在,请读者注意!
相信将来浏览器对HTML5的支持一定会逐步完善的。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5客户端校验:setCustomValidity方法</title> <script type="text/javascript"> var checkBook=function() { if(!document.getElementById("bname").checkValidity()) { document.getElementById("bname").setCustomValidity("必须输入书名!"); } if(!document.getElementById("bisbn").checkValidity()) { document.getElementById("bisbn").setCustomValidity("请填写合法的图书ISBN,例如:123-1-123-12345"); } if(!document.getElementById("bprice").checkValidity()) { document.getElementById("bprice").setCustomValidity("请填写合法的图书价格!"); } } </script> </head> <body> <form> 书名:<input id="bname" name="bname" type="text" required/><br/> ISBN:<input id="bisbn" name="bisbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/> 价格:<input id="bprice" name="bprice" type="number" max="100" min="10" step="5"/> <br/> <input type="submit" value="提交" onClick="checkBook();"/> </form> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。