HTML5-SetCutomValidity()-Funktionsvalidierungsformular, Beispiel für Sharing

HTML5-SetCutomValidity()-Funktionsvalidierungsformular, Beispiel für Sharing_Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 16:02:38

Original

1285 Leute haben es durchsucht

Die HTML5-Formularvalidierung bietet dem Front-End-Personal Komfort, es gibt jedoch einige Mängel in der Benutzererfahrung. Die Standardeingabeaufforderungen sind für Benutzer sehr unfreundlich und können die gewünschten Informationen nicht genau abrufen. Glücklicherweise stellten die Experten beim Entwurf der Schnittstelle die Methode setCustomValidilty zur Verfügung, um die Eingabeaufforderungsinformationen anzupassen. Das sind gute Nachrichten, aber es gibt auch einige Nachteile und erfordert eine zusätzliche Verarbeitung durch den Bediener, um den wirklich gewünschten Zweck zu erreichen.

Beispiel 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>

Nach dem Login kopieren

Beispiel 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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.