cari

Rumah >hujung hadapan web >tutorial js >Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing_javascript

Borang pengesahan fungsi HTML5 setCutomValidity() contoh kemahiran sharing_javascript

WBOY
WBOYasal
2016-05-16 16:02:381252semak imbas

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>

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：gambar jQuery kesan khas plug-in Mendedahkan menyedari regangan dan pembesaran_jqueryArtikel seterusnya：gambar jQuery kesan khas plug-in Mendedahkan menyedari regangan dan pembesaran_jquery

Artikel berkaitan

Lihat lagi