HTML5+setCutomValidity()函数验证表单实例分享
HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息。好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的。
示例一:
<!DOCTYPEHTML> <head> <metacharset="UTF-8"> <title>Html5页面使用javascript验证表单判断输入</title> <scriptlanguage="javascript"> functioncheck(){ varpass1=document.getElementbyid("pass1"); varpass2=document.getElementbyid("pass2"); if(pass1.value!=pass2.value){ pass2.setCustomvalidity("密码不一致"); else pass2.setCustomvalidity(""); } varemail=document.getElementbyid("email"); if(!email.checkValidity()) email.setCustomvalidity("请输入正确的email地址"); } </script> </head> <formid="testForm"onsubmit="returncheck()"> 密码:<inputtype="password"name="pass1"id="pass1"/><br/> 确认密码:<inputtype="password"name="pass2"id="pass2"/><br/> Email:<inputtype="email"name="email"id="email"/><br/> <inputtype="submit"/> </form>
示例二:
<!DOCTYPEhtml> <html> <head> <matacharset="utf-8"> <title>formtest</title> </head> <body> <formname="test"action="."method="post"> <inputtype="text"requiredpattern="^\d{4}$"oninput="out(this)"placeholder="请输入代码"> <buttontype="submit">Check</button> </form> <scripttype="text/javascript"> functionout(i){ varv=i.validity; if(true===v.valueMessing){ i.setCustomValidity("请填写些字段"); }else{ if(true===v.patternMismatch){ i.setCustomValidity("请输入4位数字的代码"); }else{ i.setCustomValidity(""); } } } </script> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。