HTML5 양식 검증은 프런트 엔드 직원에게 편리함을 제공하지만 사용자 경험에는 몇 가지 결함이 있습니다. 기본 프롬프트는 사용자에게 매우 불친절하며 원하는 정보를 정확하게 얻을 수 없습니다. 다행히 전문가들은 인터페이스를 디자인할 때 프롬프트 정보를 사용자 정의할 수 있도록 setCustomValidilty 메소드를 제공했습니다. 이는 좋은 소식이지만 몇 가지 단점도 있으며, 진정으로 원하는 목적을 달성하려면 운영자의 추가 처리가 필요합니다.
예 1:
<!DOCTYPE HTML> <head> <meta charset="UTF-8"> <title>Html5页面使用javascript验证表单判断输入</title> <script language="javascript"> function check(){ var pass1=document.getElementbyid("pass1"); var pass2=document.getElementbyid("pass2"); if (pass1.value!=pass2.value){ pass2.setCustomvalidity("密码不一致"); else pass2.setCustomvalidity(""); } var email=document.getElementbyid("email"); if (!email.checkValidity()) email.setCustomvalidity("请输入正确的email地址"); } </script> </head> <form id="testForm" onsubmit="return check()"> 密码:<input type="password" name="pass1" id="pass1" /><br/> 确认密码:<input type="password" name="pass2" id="pass2" /><br/> Email:<input type="email" name="email" id="email" /><br/> <input type="submit" /> </form>
예 2:
<!DOCTYPE html> <html> <head> <mata charset="utf-8"> <title>form test</title> </head> <body> <form name="test" action="." method="post"> <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" > <button type="submit">Check</button> </form> <script type="text/javascript"> function out(i){ var v = i.validity; if(true === v.valueMessing){ i.setCustomValidity("请填写些字段"); }else{ if(true === v.patternMismatch){ i.setCustomValidity("请输入4位数字的代码"); }else{ i.setCustomValidity(""); } } } </script> </body> </html>
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.