Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing

Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing_javascript

WBOY

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

asal

1208 orang telah melayarinya

Pengesahan borang HTML5 memberikan kemudahan kepada kakitangan bahagian hadapan, tetapi terdapat beberapa kelemahan dalam pengalaman pengguna Gesaan lalai sangat tidak mesra pengguna dan tidak boleh mendapatkan maklumat yang dikehendaki dengan tepat. Nasib baik, pakar menyediakan kaedah setCustomValidilty untuk menyesuaikan maklumat segera semasa mereka bentuk antara muka. Ini adalah berita baik, tetapi terdapat juga beberapa kelemahan, dan ia memerlukan pemprosesan tambahan oleh pengendali untuk mencapai tujuan yang benar-benar diinginkan.

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

Salin selepas log masuk

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.