HTML5表單的自動(dòng)驗(yàn)證、取消驗(yàn)證、自定義錯(cuò)誤信息的操作
我要評(píng)論1、自動(dòng)驗(yàn)證
通過在元素中使用屬性的方法，該屬性可以實(shí)現(xiàn)在表單提交時(shí)執(zhí)行自動(dòng)驗(yàn)證的功能。下面是關(guān)于對(duì)元素內(nèi)輸入內(nèi)容進(jìn)行限制的屬性的指定。
| 屬性 | 說明 |
|---|---|
| required | 輸入內(nèi)容是否不為空 |
| pattern | 輸入的內(nèi)容是否符合指定格式 |
| min、max | 輸入的數(shù)值是否在min~max范圍 |
| step | 判斷輸入數(shù)值是否為step的倍數(shù) |
1.1 required 屬性
required 屬性的主要目的是確保表單控件中的值已填寫，一旦為某個(gè)輸入型控件設(shè)置了 required 屬性，就必須填寫此項(xiàng)，否則無法提交表單。
屬性用法如下：
<form>
電子郵箱：<input type="email" required /></br>
<input type="submit" value="提交"/>
</form>執(zhí)行結(jié)果：
1.2 pattern 屬性
pattern 屬性的主要目的是根據(jù)表單控件上設(shè)置的格式規(guī)則驗(yàn)證輸入是否為有效格式。通過在 input 元素中使用 pattern 屬性，并將屬性值設(shè)為某個(gè)格式的正則表達(dá)式，該屬性實(shí)現(xiàn)在提交表單時(shí)會(huì)檢查其內(nèi)容是否符合給定格式。
屬性用法如下：
<form>
請(qǐng)輸入內(nèi)容：<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一個(gè)數(shù)字和三個(gè)大寫字母"/>
<input type="submit" value="提交"/>
</form>執(zhí)行結(jié)果：
1.3 min、max 和 step 屬性
通過設(shè)置 min 和 max 屬性，可以將輸入控件的數(shù)值輸入范圍限定在最低值和最高值之間。設(shè)置其 step 屬性能夠制定輸入值遞增或遞減的梯度。
屬性用法如下：
數(shù)值1：<input type="number" value="25" min="10" max="100" step="5"/></br> 數(shù)值2：<input type="range" value="45" min="0" max="100" step="5"/>
執(zhí)行結(jié)果：
2、checkValidity 顯示驗(yàn)證
除了對(duì) input 元素添加屬性進(jìn)行元素內(nèi)容有效性的自動(dòng)驗(yàn)證，所有的表單元素和輸入元素（包括：select 和 textarea）在其 DOM 節(jié)點(diǎn)上都有一個(gè) checkValidity 方法。當(dāng)想要覆蓋瀏覽器的默認(rèn)的驗(yàn)證和反饋過程時(shí)，可以使用這個(gè)方法。checkValidity 方法根據(jù)驗(yàn)證檢查成功與否，返回 true 或 false，與此同時(shí)會(huì)告訴瀏覽器運(yùn)行其檢查。
【實(shí)例】使用 checkValidity 方法驗(yàn)證用戶輸入的電子郵箱格式是否正確。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="pan_junbiao的博客">
<title>checkValidity顯示驗(yàn)證</title>
<script type="text/javascript">
function check() {
var email = document.getElementById("email");
if (email.value == "") {
alert("請(qǐng)輸入電子郵箱");
return false;
}
else if (!email.checkValidity()) {
alert("請(qǐng)輸入正確的電子郵箱");
return false;
}
else {
alert("您輸入的電子郵箱格式正確");
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return check()">
<label for="email">電子郵箱：</label>
<input name="email" id="email" type="email" />
<input type="submit" value="提交" />
</form>
</body>
</html>執(zhí)行結(jié)果：
3、取消驗(yàn)證
HTML5 提供了兩種方法用于取消表單驗(yàn)證。
第一種方法是利用 form 元素的 novalidate 屬性，它可以關(guān)閉整個(gè)表單驗(yàn)證。使用方法如下：
<form novalidate> </form>
第二種方法是利用 input 元素或 submin 元素的 formnovalidate屬性，利用 input 元素的 formnovalidate 屬性可以讓表單驗(yàn)證對(duì)單個(gè) input 元素失效。使用方法如下：
<input type="email" formnovalidate />
4、自定義錯(cuò)誤信息
HTML5 中許多新的 input 元素都帶有對(duì)于輸入內(nèi)容的有效性的校驗(yàn)，如果檢查不通過，瀏覽器會(huì)針對(duì)該元素提供錯(cuò)誤信息。但有時(shí)候開發(fā)者不想使用這些默認(rèn)的錯(cuò)誤提示信息，而想使用自己定義的錯(cuò)誤提示信息；或者有時(shí)，想給某個(gè)文本框增加一種錯(cuò)誤提示信息。
【實(shí)例】使用 setCustomValidity 方法來自定義錯(cuò)誤信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="pan_junbiao的博客">
<title>自定義錯(cuò)誤信息</title>
<script>
function check() {
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var email = document.getElementById("email");
if (pass1.value != pass2.value) {
pass2.setCustomValidity("密碼不一致。");
}
else {
pass2.setCustomValidity("");
}
if (!email.checkValidity()) {
email.setCustomValidity("請(qǐng)輸入正確的電子郵箱地址。");
}
}
</script>
</head>
<body>
<form id="testform">
密碼：<input type=password name="pass1" id="pass1" /><br />
確認(rèn)密碼：<input type=password name="pass2" id="pass2" /><br />
電子郵箱：<input type=email name="email1" id="email" /><br />
<div><input type="submit" onClick="return check();" /></div>
</form>
</body>
</html>執(zhí)行結(jié)果：
到此這篇關(guān)于HTML5表單的自動(dòng)驗(yàn)證、取消驗(yàn)證、自定義錯(cuò)誤信息的文章就介紹到這了,更多相關(guān)HTML5表單自動(dòng)驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
wordpress添加Html5的表單驗(yàn)證required方法小結(jié)
這篇文章主要介紹了wordpress添加Html5的表單驗(yàn)證required方法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-08-18
HTML5表單驗(yàn)證特性(知識(shí)點(diǎn)小結(jié))
這篇文章主要介紹了HTML5表單驗(yàn)證特性的一些知識(shí)點(diǎn)，本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-10
html5自帶表單驗(yàn)證體驗(yàn)優(yōu)化及提示氣泡修改功能
很多朋友進(jìn)行表單驗(yàn)證的時(shí)候，都是自己用jquery或者js手工驗(yàn)證，或者用一下jquery插件進(jìn)行驗(yàn)證。感覺html5自帶驗(yàn)證不是很好用，下面小編給大家分享使用純html5編寫的一個(gè)表2017-09-12- 這篇文章主要介紹了HTML5 表單驗(yàn)證失敗的提示語問題的相關(guān)資料,需要的朋友可以參考下2017-07-13
HTML5實(shí)現(xiàn)表單自動(dòng)驗(yàn)證功能實(shí)例代碼
在HTML5 中，在增加了大量的表單元素與屬性的同時(shí)，也增加了大量在提交時(shí)對(duì)表單與表單內(nèi)新增元素進(jìn)行內(nèi)容有效性驗(yàn)證的功能，接下來我們來講一下自動(dòng)驗(yàn)證，需要的朋友參考2017-01-11HTML5利用約束驗(yàn)證API來檢查表單的輸入數(shù)據(jù)的代碼實(shí)例
這篇文章不會(huì)去討論簡(jiǎn)單的input type，本文想把重點(diǎn)放在HTML5表單驗(yàn)證機(jī)制上。主要介紹是HTML5是如何利用約束驗(yàn)證API來檢查表單的輸入數(shù)據(jù)的，當(dāng)然，本文會(huì)涉及到很多其它2016-12-20- 表單驗(yàn)證就是在表單提交服務(wù)器前對(duì)其進(jìn)行一系列的檢查并通知用戶糾正錯(cuò)誤，本篇文章主要介紹了詳解HTML5中表單驗(yàn)證的8種方法，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-19
- 這篇文章主要介紹了使用HTML5的表單驗(yàn)證的簡(jiǎn)單示例,包括手機(jī)端利用的一個(gè)小例子分享,需要的朋友可以參考下2015-09-09
HTML5 form標(biāo)簽之解放表單驗(yàn)證、增加文件上傳、集成拖放的使用方法
本篇文章小編為大家介紹，HTML5 form標(biāo)簽之解放表單驗(yàn)證、增加文件上傳、集成拖放的使用方法。需要的朋友參考下2013-04-24
