使用html5自定义错误信息

在html5中已经为我们定义了一些错误信息。比如email和url等等。但是在我们实际的使用中,我们还会使用到比如是用户两次输入密码的验证,这是使用html5怎么来实现呢!

~ 其实html5里面为元素提供了一个setCustomValidity(“错误信息”);的方法,使用这个方法我们就能很简单的实现html5的上述功能,而不是像在xhtml里面通过顶一个空的span或者是div,使用它的innerHTML来输出错误信息!~

输入代码:

———————————————————————————————————

<!DOCTYPE HTML> <html> <head> <title>使用html5的自定义错误信息完成两次密码的验证</title> <meta charset=”UTF-8″> <script type=”text/javascript”> function check(){ var pass1=$(“pass1″); var pass2=$(“pass2″); if(pass1.value!=pass2.value){ pass2.setCustomValidity(“密码不一致”); }else{ pass2.setCustomValidity(“”); } }

function $(id){ return document.getElementById(id); } </script> </head> <body> <center> <form action=”#”> 输入密码:<input id=”pass1″ type=”password” name=”pass1″/><br/><br/> 重复密码:<input id=”pass2″ type=”password” name=”pass2″><br/><br/> <input type=”submit” value=”提交” onclick=”check();”/><br/> </form> <center> </body> </html>

————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/input1.htm

 

 

共有 9 条评论

Top