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