HTML5+setCutomValidity()函數(shù)驗證表單實例分享
更新時間：2015年04月24日 08:50:42 投稿：hebedich
本文給大家分享的是在HTML5中結合setCutomValidity()函數(shù)實現(xiàn)驗證表單的實例，非常的時間實用，這里推薦給大家，有需要的小伙伴可以參考下。
HTML5表單驗證給前端人員帶來了便利，但是在用戶體驗上存在一些缺陷，默認的提示對用戶很不友好，無法準確的獲取想要的信息。好在大牛們在接口設計的時候提供了setCustomValidilty方法可以自定義提示信息。這是一個好消息，但也存在一些弊端，需要讓開人員做額外的一些處理才達到真正想要的目的。
示例一：
<!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>
示例二：
<!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("請?zhí)顚懶┳侄?);
}else{
if(true === v.patternMismatch){
i.setCustomValidity("請輸入4位數(shù)字的代碼");
}else{
i.setCustomValidity("");
}
}
}
</script>
</body>
</html>
以上所述就是本文的全部內容了，希望大家能夠喜歡。
相關文章
BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件（ GitHub地址 ），非常不錯，下面腳本之家小編給大家分享BetterScroll 在移動端滾動場景的應用，一起看看吧2017-09-09
JavaScript中Window對象stop()方法用于停止頁面載入,該方法類似在瀏覽器上點擊停止載入按鈕,如果頁面在載入圖片或框架(iframe)時間過長,我門可以使用該方法來停止載入,可以應用在判斷頁面載入時間,過長就不加載特效2023-09-09
這篇文章主要介紹了JS實現(xiàn)的表格行鼠標點擊高亮效果代碼,涉及JavaScript響應鼠標事件動態(tài)變換頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要是對Javascript中匿名函數(shù)的多種調用方式進行了詳細的總結介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JS使用cookie實現(xiàn)DIV提示框只顯示一次的方法
這篇文章主要介紹了JS使用cookie實現(xiàn)DIV提示框只顯示一次的方法,涉及JavaScript基于cookie標記控制頁面元素樣式修改的技巧,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了如何利用JS實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
addeventlistener監(jiān)聽scroll跟touch(實例講解)
下面小編就為大家?guī)硪黄猘ddeventlistener監(jiān)聽scroll跟touch(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
javascript設計模式 – 單例模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 單例模式原理與應用,結合實例形式分析了javascript單例模式原理、定義、應用場景及相關操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了關于微信公眾號開發(fā)無法支付的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了JavaScript如何連接連接抖音打印組件實現(xiàn)打印小票功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-04-04