suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5-SetCutomValidity()-Funktionsvalidierungsformular, Beispiel für Sharing_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 16:02:381219Durchsuche

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>

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das jQuery-Plug-in für Bildspezialeffekte Revealing realisiert Dehnung und Vergrößerung_jqueryNächster Artikel：Das jQuery-Plug-in für Bildspezialeffekte Revealing realisiert Dehnung und Vergrößerung_jquery

In Verbindung stehende Artikel

Mehr sehen