HTML5+setCutomValidity()函數(shù)驗(yàn)證表單實(shí)例分享

更新時(shí)間：2015年04月24日 08:50:42 投稿：hebedich

本文給大家分享的是在HTML5中結(jié)合setCutomValidity()函數(shù)實(shí)現(xiàn)驗(yàn)證表單的實(shí)例，非常的時(shí)間實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。

HTML5表單驗(yàn)證給前端人員帶來(lái)了便利，但是在用戶體驗(yàn)上存在一些缺陷，默認(rèn)的提示對(duì)用戶很不友好，無(wú)法準(zhǔn)確的獲取想要的信息。好在大牛們?cè)诮涌谠O(shè)計(jì)的時(shí)候提供了setCustomValidilty方法可以自定義提示信息。這是一個(gè)好消息，但也存在一些弊端，需要讓開人員做額外的一些處理才達(dá)到真正想要的目的。

示例一：

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>Html5頁(yè)面使用javascript驗(yàn)證表單判斷輸入</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("請(qǐng)輸入正確的email地址");
}
</script>
</head>
<form id="testForm" onsubmit="return check()">
  密碼:<input type="password" name="pass1" id="pass1" /><br/>
  確認(rèn)密碼:<input type="password" name="pass2" id="pass2" /><br/>
  Email:<input type="email" name="email" id="email" /><br/>
  <input type="submit" />
</form>

示例二：

<!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="請(qǐng)輸入代碼" >
    <button type="submit">Check</button>
  </form>
<script type="text/javascript">
function out(i){
  var v = i.validity;
  if(true === v.valueMessing){
    i.setCustomValidity("請(qǐng)?zhí)顚懶┳侄?);
  }else{
    if(true === v.patternMismatch){
      i.setCustomValidity("請(qǐng)輸入4位數(shù)字的代碼");
    }else{
      i.setCustomValidity("");
    }
  }
}
</script>
</body>
</html>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用
BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開源插件（ GitHub地址），非常不錯(cuò)，下面腳本之家小編給大家分享BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用，一起看看吧
2017-09-09
JavaScript讓瀏覽器停止加載頁(yè)面的方法
JavaScript中Window對(duì)象stop()方法用于停止頁(yè)面載入,該方法類似在瀏覽器上點(diǎn)擊停止載入按鈕,如果頁(yè)面在載入圖片或框架(iframe)時(shí)間過長(zhǎng),我門可以使用該方法來(lái)停止載入,可以應(yīng)用在判斷頁(yè)面載入時(shí)間,過長(zhǎng)就不加載特效
2023-09-09
JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
Javascript中匿名函數(shù)的多種調(diào)用方式總結(jié)
這篇文章主要是對(duì)Javascript中匿名函數(shù)的多種調(diào)用方式進(jìn)行了詳細(xì)的總結(jié)介紹。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
JS使用cookie實(shí)現(xiàn)DIV提示框只顯示一次的方法
這篇文章主要介紹了JS使用cookie實(shí)現(xiàn)DIV提示框只顯示一次的方法,涉及JavaScript基于cookie標(biāo)記控制頁(yè)面元素樣式修改的技巧,需要的朋友可以參考下
2015-11-11
基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
addeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇addeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-08-08
javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript單例模式原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
關(guān)于微信公眾號(hào)開發(fā)無(wú)法支付的問題解決
這篇文章主要介紹了關(guān)于微信公眾號(hào)開發(fā)無(wú)法支付的問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-12-12
JavaScript連接組件實(shí)現(xiàn)打印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何連接連接抖音打印組件實(shí)現(xiàn)打印小票功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-04-04