在HTML5中內(nèi)置了很多表單的驗(yàn)證規(guī)則，這些驗(yàn)證規(guī)則會(huì)根據(jù)用戶在input元素中輸入的內(nèi)容返回一個(gè)布爾值來告訴我們表單驗(yàn)證的狀態(tài)。下面我們就來列舉一些我們比較常用的內(nèi)置驗(yàn)證規(guī)則吧：
成都創(chuàng)新互聯(lián)是專業(yè)的臨潼網(wǎng)站建設(shè)公司，臨潼接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行臨潼網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
ValueMising規(guī)則
示例：input type="text" required value=""
目的：確保表單控件(input元素在頁面中是以一個(gè)控件的形式呈現(xiàn)的)中的值已填寫。
用法：在表單控件中將required屬性設(shè)置為true。因?yàn)閞equired屬性的默認(rèn)值為true所以如示例中所示：在input元素中接添加required屬性也是可以的。
詳細(xì)說明：如果表單控件設(shè)置了required特性，那么在用戶填寫或者通過代碼調(diào)用方式填值之前，控件會(huì)一直處于無效狀態(tài)。例如，在示例中我們設(shè)置該控件的值為空，空的文本輸入框無法通過必填檢查，除非在其中輸入任意文本。輸入值為空時(shí)，valueMissing會(huì)返回true。表示沒有通過驗(yàn)證。
typeMismatch規(guī)則
示例：input type=“url” value=“miaomiaoxue”/
目的：保證控件值與預(yù)期類型相匹配(如numbe、email、URL等)。
用法： 指定表單控件的type特性值為numbe、email、URL等規(guī)定文本輸入規(guī)則的類型。
詳細(xì)說明: 特殊的表單控件類型不只是用來定制手機(jī)鍵盤,如果瀏覽器能夠識(shí)別出來表單控件中的輸入不符合對(duì)應(yīng)的類型規(guī)則,比如email地址中沒有@符號(hào)，或者number型控件的輸入值不是有效的數(shù)字，示例中URL型的空間不是一個(gè)標(biāo)準(zhǔn)的鏈接格式。那么瀏覽器就會(huì)把這個(gè)控件標(biāo)記出來以提示類型不匹配。無論哪種出錯(cuò)情況，typeMismatch將返回true。表示沒有通過驗(yàn)證。
patternMismatch規(guī)則
示例：input type="text" pattern=“/^[A-z]+$/" value=“1234“/
目的：根據(jù)表單控件上設(shè)置的格式規(guī)則驗(yàn)證輸入的文本是否為有效格式
用法：在表單控件上設(shè)置pattern特性，井賦予適當(dāng)?shù)钠ヅ湟?guī)則。
詳細(xì)說明：pattern特性向開發(fā)人員提供了一種強(qiáng)大而靈活的方式來為表單的控件值設(shè)定正則表達(dá)式驗(yàn)證機(jī)制。當(dāng)為控件設(shè)置了pattern特性后，只要輸入控件的值不符合模式規(guī)則，如示例中設(shè)定的正則表達(dá)式規(guī)則該控件的值含有字母和$符號(hào)，這里設(shè)置的值為1234，不符合規(guī)則設(shè)定，因此patternMismatch就會(huì)返回true值。從引導(dǎo)用戶和技術(shù)參考兩方面考慮，
你應(yīng)該在包含pattern特性的表單控件中設(shè)置title特性以說明規(guī)則的作用。
tooLong規(guī)則
示例：input type=“text” maxlength=“3” value=“hello“/
目的：避免輸入值包含過多字符。
用法：在表單控件上設(shè)置maxLength特性。
詳細(xì)說明：如果輸入值的長度超過maxLength，示例中最大限制設(shè)置為3，但值為hello，操過了3個(gè)字符的限制，tooLong規(guī)則就會(huì)返回true。雖然表單控件通常會(huì)在用戶輸入時(shí)限制最大長度，但在有些情況下，如通過程序設(shè)置，還是會(huì)超出最大值。
rangeUnderflow規(guī)則
示例：input type=“text” min=“3” max=“5” value=“0" /
目的：限制數(shù)值型控件的最小值。
用法：為表單控件設(shè)置min屬性，并賦予允許的最小值。
詳細(xì)說明：在需要做數(shù)值范圍檢查的表單控件中，數(shù)值很可能會(huì)暫時(shí)低于設(shè)置的下限，如示例中設(shè)置的值為0，而設(shè)置的min屬性為3。此時(shí)，rangeUnderflow屬性將返回true。
rangeOverflow規(guī)則
示例：input type=“text” min=“3” max=“5” value=“7" /
目的：限制數(shù)值型控件的最大值。
用法：為表單控件設(shè)置max屬性，并賦予允許的最大值。
詳細(xì)說明：與rangeUnderflow類似，如果一個(gè)表單控件的值比max屬性值更大，如示例中設(shè)置的值為7，而設(shè)置的max屬性為5。此時(shí)，rangeOverflow屬性將返回true。
stepMismatch規(guī)則
示例：input type=“text” min=“0” max=“100” step=“5” value=“17" /
目的：確保輸入值符合min、max及step即設(shè)置。
用法：為表單控件設(shè)置step特性，指定數(shù)值的增量。
詳細(xì)說明：此約束條件用來保證數(shù)值符合min、max和step的要求。換句話說，當(dāng)前值必須是最小值與step屬性值的倍數(shù)之和。如示例中設(shè)置的數(shù)值范圍為0到100，step特性值為5，此時(shí)就不允許出現(xiàn)17，而可以是“0+5*X”X為（0~20）中任意一個(gè)值皆可。否則stepMismatch返回true值。
valid規(guī)則
示例：input type=“range” min=“5” max=“20” step=“5” value=“10" /
目的：驗(yàn)證表單控件是否滿足所有的表單驗(yàn)證規(guī)則
用法：適用于所有的input表單控件。
詳細(xì)說明：當(dāng)該表單控件滿足所有驗(yàn)證規(guī)則時(shí)，valid屬性就是true，否則，只要有一項(xiàng)驗(yàn)證規(guī)則沒通過，valid屬性會(huì)返回false。如示例所示就滿足所有驗(yàn)證條件所以valid屬性會(huì)返回true。注意前面幾個(gè)驗(yàn)證屬性是沒有通過的情況下返回true。推薦你去教程網(wǎng)站秒秒學(xué)上過一遍相關(guān)知識(shí)，希望對(duì)你有幫助。
HTML5中表單驗(yàn)證有如下好處：
1、可判斷用戶是否已填寫表單中的必填項(xiàng)目。
2、可判斷用戶輸入的郵件地址是否合法。
3、可判斷用戶是否已輸入合法的日期。
4、可判斷用戶是否在數(shù)據(jù)域(numeric field)中輸入了文本。
表單驗(yàn)證通常采用策略模式的思想，把一個(gè)個(gè)驗(yàn)證規(guī)則封裝成一個(gè)函數(shù)，比如非空規(guī)則、最大長度規(guī)則等，不同的輸入框選擇某一個(gè)或者某幾個(gè)規(guī)則進(jìn)行驗(yàn)證。
擴(kuò)展資料：
HTML表單一直都是Web的核心技術(shù)之一，有了它才能在Web上進(jìn)行各種各樣的應(yīng)用。HTML5 Forms新增了許多新控件及其API，方便做更復(fù)雜的應(yīng)用，而不用借助其它Javascript框架。
表單有以下幾個(gè)基本知識(shí)點(diǎn)：
1、表單仍是以form元素作為容器，可在其中設(shè)置基本的提交特性。
2、當(dāng)用戶提交頁面時(shí)，表單仍然向服務(wù)器發(fā)送表單控件的值。
3、之前老版本中的表單控件，如text radio checkbox等等，都可以按原有方式使用，盡管增加了新的功能。
4、仍然可以使用javascript操作表單控件。
實(shí)現(xiàn)表單自定義驗(yàn)證消息，實(shí)際上很簡單。大體思路為:
1、首先我們要設(shè)置表單的驗(yàn)證規(guī)則
2、然后根據(jù)表單的驗(yàn)證規(guī)則定義要顯示驗(yàn)證消息，
3、最后通過JavaScript 和CSS相結(jié)合先將所有預(yù)定義的驗(yàn)證消息隱藏掉，然后再根據(jù)表單中的輸入是否符合驗(yàn)證規(guī)則來控制驗(yàn)證消息的顯隱狀態(tài)。
下面我們就來通過一個(gè)具體的示例進(jìn)行講解，你可以將這個(gè)示例直接放在瀏覽器中運(yùn)行查看效果，但是要注意代碼中引用了第三方類庫jQuery，運(yùn)行時(shí)你要自己設(shè)置一下：
!doctype html
html
head
meta charset="utf-8" /
titleForms: 驗(yàn)證提示/title
// 設(shè)置一些必要的樣式，如驗(yàn)證消息的文字樣式和控制驗(yàn)證消息顯隱的樣式
style
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
.validation-messages {
margin-bottom:15px;
}
.validation-messages span {
font-size:0.8em;
background-color:#eee;
padding:6px;
border:1px solid #ccc;
border-radius:10px;
color:#666;
}
//所有class屬性為hide的元素都會(huì)被隱藏
.hide {
display:none;
}
/style
/head
body
article
h1Formsspan - 驗(yàn)證提示/span/h1
/article
div id="result-stub" class="well hidden"
form id="change-email-form" name="change-email-form"
fieldset
h4修改郵箱地址/h4
//設(shè)置表單應(yīng)該遵循的驗(yàn)證規(guī)則。
//pattern 屬性：規(guī)定用于驗(yàn)證輸入字段的模式。
//maxlength 屬性：規(guī)定輸入字段的最大長度,以字符個(gè)數(shù)計(jì)。
//required屬性：規(guī)定該input元素為必須的元素。
label用戶名:/label
input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required /
//設(shè)置表單的驗(yàn)證消息，并結(jié)合class屬性樣式將其隱藏起來
div
//這里的data-rule的屬性值是HTML5表單中內(nèi)置的驗(yàn)證規(guī)則中的一種
span data-rule="valueMissing"
class="hide"用戶名不能為空./span
span data-rule="patternMismatch"
class="hide"必須是字母字符(長度應(yīng)為5~30個(gè)字符)./span
/div
label郵箱地址:/label
//設(shè)置表單應(yīng)該遵循的驗(yàn)證規(guī)則。
input type="email" name="email" id="email"
title="Email address is required" required /
//設(shè)置表單的驗(yàn)證消息，并結(jié)合class屬性樣式將其隱藏起來
div
span data-rule="valueMissing"
郵箱地址不能為空./span
span data-rule="typeMismatch"
郵箱格式不正確./span
/div
hr /
//設(shè)置兩個(gè)按鈕，作用分別是“清空表單內(nèi)容和對(duì)表單中的內(nèi)容進(jìn)行驗(yàn)證
button type="submit" id="submit"
name="submit"修改/button
button type="button" id="checkValidation"
name="checkValidation"
class="btn"驗(yàn)證/button
/fieldset
/form
/div
script
window.onload= function() {
//---
// 創(chuàng)建一個(gè)驗(yàn)證規(guī)則容器。
var ruleNames = [];
// 填充驗(yàn)證規(guī)則容器.
// 尋找所有具有驗(yàn)證規(guī)則的元素，然后將該元素的data-rule屬性值添加到驗(yàn)證規(guī)則數(shù)組中去。
$("[data-rule]").each(function(i, element) {
var ruleName = element.getAttribute('data-rule');
if ($.inArray(ruleName, ruleNames) 0) {
ruleNames.push(ruleName);
}
});
var
// 首先確定用戶界面隱藏了所有驗(yàn)證消息。
// 然后在選定的表單上運(yùn)行驗(yàn)證規(guī)則。
validate = function() {
$(".validation-messages span")
.addClass('hide');
document.getElementById('change-email-form')
.checkValidity();
},
// 查詢每個(gè)輸入的元素，以確定哪個(gè)元素?zé)o效。
// 一旦檢測到無效元素，就遍歷驗(yàn)證規(guī)則，找到無效的原因，然后通過消息對(duì)用戶進(jìn)行提示
validationFail = function(e) {
var
element = e.srcElement,
validity = element.validity;
if (!validity.valid) {
ruleNames.forEach(function(ruleName) {
checkRule(validity,
ruleName,
element);
});
e.preventDefault();
}
},
// 使用 input 元素 的ValidityState 對(duì)象的實(shí)例來運(yùn)行驗(yàn)證規(guī)則。
//如果這個(gè)驗(yàn)證規(guī)則返回ture，就表示無法通過驗(yàn)證，在表單中就會(huì)有相應(yīng)的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele).next()
.find('[data-rule="'
+ ruleName + '"]')
.removeClass('hide');
}
};
// 所有驗(yàn)證事件處理程序是附加在input元素上的而不是button元素
$(':input:not(:button)').each(function() {
this.oninvalid = validationFail;
this.onblur = validate;
});
$('#checkValidation').click(validate);
}
/script
script src="../js/jquery.js"/script
/body
/html
推薦你去教程網(wǎng)站秒秒學(xué)上過一遍相關(guān)知識(shí)，希望對(duì)你有幫助。
重慶分公司
重慶分公司
