HTML5中表單內(nèi)置驗證規(guī)則是什么，有哪些內(nèi)置驗證規(guī)則呢？

在HTML5中內(nèi)置了很多表單的驗證規(guī)則，這些驗證規(guī)則會根據(jù)用戶在input元素中輸入的內(nèi)容返回一個布爾值來告訴我們表單驗證的狀態(tài)。下面我們就來列舉一些我們比較常用的內(nèi)置驗證規(guī)則吧：

創(chuàng)新互聯(lián)是專業(yè)的泉港網(wǎng)站建設(shè)公司，泉港接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(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)隊,希望更多企業(yè)前來合作!

ValueMising規(guī)則

示例：input type="text" required value=""

目的：確保表單控件(input元素在頁面中是以一個控件的形式呈現(xiàn)的)中的值已填寫。

用法：在表單控件中將required屬性設(shè)置為true。因為required屬性的默認(rèn)值為true所以如示例中所示：在input元素中接添加required屬性也是可以的。

詳細(xì)說明：如果表單控件設(shè)置了required特性，那么在用戶填寫或者通過代碼調(diào)用方式填值之前，控件會一直處于無效狀態(tài)。例如，在示例中我們設(shè)置該控件的值為空，空的文本輸入框無法通過必填檢查，除非在其中輸入任意文本。輸入值為空時，valueMissing會返回true。表示沒有通過驗證。

typeMismatch規(guī)則

示例：input type=“url” value=“miaomiaoxue”/

目的：保證控件值與預(yù)期類型相匹配(如numbe、email、URL等)。

用法： 指定表單控件的type特性值為numbe、email、URL等規(guī)定文本輸入規(guī)則的類型。

詳細(xì)說明: 特殊的表單控件類型不只是用來定制手機(jī)鍵盤,如果瀏覽器能夠識別出來表單控件中的輸入不符合對應(yīng)的類型規(guī)則,比如email地址中沒有@符號，或者number型控件的輸入值不是有效的數(shù)字，示例中URL型的空間不是一個標(biāo)準(zhǔn)的鏈接格式。那么瀏覽器就會把這個控件標(biāo)記出來以提示類型不匹配。無論哪種出錯情況，typeMismatch將返回true。表示沒有通過驗證。

patternMismatch規(guī)則

示例：input type="text" pattern=“/^[A-z]+$/" value=“1234“/

目的：根據(jù)表單控件上設(shè)置的格式規(guī)則驗證輸入的文本是否為有效格式

用法：在表單控件上設(shè)置pattern特性，井賦予適當(dāng)?shù)钠ヅ湟?guī)則。

詳細(xì)說明：pattern特性向開發(fā)人員提供了一種強(qiáng)大而靈活的方式來為表單的控件值設(shè)定正則表達(dá)式驗證機(jī)制。當(dāng)為控件設(shè)置了pattern特性后，只要輸入控件的值不符合模式規(guī)則，如示例中設(shè)定的正則表達(dá)式規(guī)則該控件的值含有字母和$符號，這里設(shè)置的值為1234，不符合規(guī)則設(shè)定，因此patternMismatch就會返回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個字符的限制，tooLong規(guī)則就會返回true。雖然表單控件通常會在用戶輸入時限制最大長度，但在有些情況下，如通過程序設(shè)置，還是會超出最大值。

rangeUnderflow規(guī)則

示例：input type=“text” min=“3” max=“5” value=“0" /

目的：限制數(shù)值型控件的最小值。

用法：為表單控件設(shè)置min屬性，并賦予允許的最小值。

詳細(xì)說明：在需要做數(shù)值范圍檢查的表單控件中，數(shù)值很可能會暫時低于設(shè)置的下限，如示例中設(shè)置的值為0，而設(shè)置的min屬性為3。此時，rangeUnderflow屬性將返回true。

rangeOverflow規(guī)則

示例：input type=“text” min=“3” max=“5” value=“7" /

目的：限制數(shù)值型控件的最大值。

用法：為表單控件設(shè)置max屬性，并賦予允許的最大值。

詳細(xì)說明：與rangeUnderflow類似，如果一個表單控件的值比max屬性值更大，如示例中設(shè)置的值為7，而設(shè)置的max屬性為5。此時，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，此時就不允許出現(xiàn)17，而可以是“0+5*X”X為（0~20）中任意一個值皆可。否則stepMismatch返回true值。

valid規(guī)則

示例：input type=“range” min=“5” max=“20” step=“5” value=“10" /

目的：驗證表單控件是否滿足所有的表單驗證規(guī)則

用法：適用于所有的input表單控件。

詳細(xì)說明：當(dāng)該表單控件滿足所有驗證規(guī)則時，valid屬性就是true，否則，只要有一項驗證規(guī)則沒通過，valid屬性會返回false。如示例所示就滿足所有驗證條件所以valid屬性會返回true。注意前面幾個驗證屬性是沒有通過的情況下返回true。推薦你去教程網(wǎng)站秒秒學(xué)上過一遍相關(guān)知識，希望對你有幫助。

HTML5 表單多條件驗證問題

1.輸入型控件

Input type

用途

說明

email

電子郵件地址文本框

url

網(wǎng)頁URL文本框

number

數(shù)值的輸入域

屬性 值 描述

max number 規(guī)定允許的最大值

min number 規(guī)定允許的最小值

step number 規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）

value number 規(guī)定默認(rèn)值

range

特定值的范圍的數(shù)值，以滑動條顯示

屬性 值 描述

max number 規(guī)定允許的最大值

min number 規(guī)定允許的最小值

step number 規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）

value number 規(guī)定默認(rèn)值

Date pickers

日期，時間選擇器

僅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站點頂部顯示的搜索框

與普通文本框用法一樣，只不過這樣更語文化

color

顏色選擇器

僅Opera支持

將原本type為text的input控件聲明為以上特殊類型，是為了給用戶呈現(xiàn)不同的輸入界面（移動平臺上支持這些不同的輸入界面，這里就不細(xì)說），而且表單提交時會對其值做進(jìn)一步的驗證。下面展示這些新表單元素，請用支持這些表單元素的瀏覽器查看，IE對其支持最差。

E-mail:

date:

range: number: color:

2. 表單新特性和函數(shù)

2.1 placeholder

當(dāng)用戶還沒有輸入值時，輸入型控件可能通過placeholder向用戶顯示描述性說明文字或者提示信息，這在目前網(wǎng)站中很常見，一些JS框架都會提供類似功能，簡單的說下在舊版本中常用的解決方案，為輸入控件創(chuàng)建一個label，然后通過CSS控制些label的位置使之覆蓋在輸入控件上面，當(dāng)label獲得焦點時，瀏覽器會把焦點指向輸入控件。不過有了placeholder，新的瀏覽器就內(nèi)置了這一功能，其特性值會以淺灰色樣式顯示在輸入框中，當(dāng)輸入框獲得焦點并有值后，該提示信息自動消失。

如：

plabel for="runnername"Runner:/label

input id="runnername"name="runnername" type="text" placeholder="First and last name" /

/p

Runner:

2.2 autocomplete

其實在IE6中,autocomplete就已經(jīng)實現(xiàn)，不過現(xiàn)在這一特性終于標(biāo)準(zhǔn)化了，瀏覽器通過autocomplete特性能夠知曉是否應(yīng)該保存輸入值以備將來使用，autocomplete應(yīng)該用一保護(hù)用戶敏感數(shù)據(jù)，避免本地瀏覽器對它們進(jìn)行不安全的存儲。

類型

作用

on

該字段無需保護(hù)，值可以被保存和恢復(fù)

off

該字段需要保護(hù)，值不可以保存

unspecified

包含form的默認(rèn)設(shè)置，如果沒有被包含在表單中或沒有指定值，則行為表現(xiàn)為on

如：

form action="" method="get" autocomplete="on"

Name:input type="text" name="name" /br /

E-mail: input type="email" name="email" autocomplete="off" /br /

input type="submit" /

/form

當(dāng)用戶提交過一次表單后，再次訪問，name的輸入框會提示你曾輸入的值，而email則不會提示。

2.3 autofocus

頁面載入時，我們通過autofocus指定某個表單元素獲得焦點，但每個頁面只允許出現(xiàn)一個autofocus，如果設(shè)置多個則相當(dāng)于未指定些行為。目前Opera10,Chromet和Safari瀏覽器支持。如果用戶有希望焦點轉(zhuǎn)移的情況下，使用使用autofocus會惹惱用戶。

2.5 list特性和datalist

通過使用list，開發(fā)人員能夠為某個輸入型控件構(gòu)造一個選值列表，其使用方法：

Webpage: input type="url" list="url_list" name="link" /

datalist id="url_list"

option label="W3School" value="" /

option label="Google" value="" /

option label="Microsoft" value="" /

/datalist

Webpage:

請在Opera9+或Firefox10+瀏覽器中查看。

2.6 required

required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。它是表單驗證最簡單的一種方式方法，使用方法：

Name: input type="text" name="usr_name" required="required" /

2.7 pattern

pattern 屬性規(guī)定用于驗證 input 域的模式（pattern），模式（pattern） 是正則表達(dá)式。那些type為email或url的輸入控件內(nèi)置相關(guān)正則表達(dá)式，如果value不符合其正則表達(dá)式，那表單將通不過驗證，無法提交。使用方法：

Country code: input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" /

2.8 novalidate

novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。

如：

form action="demo_form.asp" method="get" novalidate="true"

E-mail: input type="email" name="user_email" /

input type="submit" /

/form

3. 表單驗證

表單驗證是一套系統(tǒng)，它為終端用戶檢測無效的數(shù)據(jù)并標(biāo)記這些錯誤，是一種用戶體驗的優(yōu)化，讓web應(yīng)用更快的拋出錯誤，但它仍不能取代服務(wù)器端的驗證，重要數(shù)據(jù)還要要依賴于服務(wù)器端的驗證，因為前端驗證是可以繞過的。

目前任何表單元素都有八種可能的驗證約束條件：

名稱

用途

用法

valueMissing

確?？丶械闹狄烟顚?/p>

將required屬性設(shè)為true，

input type="text"required="required"/

typeMismatch

確?？丶蹬c預(yù)期類型相匹配

input type="email"/

patternMismatch

根據(jù)pattern的正則表達(dá)式判斷輸入是否為合法格式

input type="text" pattern="[0-9]{12}"/

toolong

避免輸入過多字符

設(shè)置maxLength，textarea id="notes" name="notes" maxLength="100"/textarea

rangeUnderflow

限制數(shù)值控件的最小值

設(shè)置min，input type="number" min="0" value="20"/

rangeOverflow

限制數(shù)值控件的最大值

設(shè)置max，input type="number" max="100" value="20"/

stepMismatch

確保輸入值符合min,max,step的設(shè)置

設(shè)置max min step，input type="number" min="0" max="100" step="10" value="20"/

customError

處理應(yīng)用代碼明確設(shè)置能計算產(chǎn)生錯誤

例如驗證兩次輸入的密碼是否一致，等會DEMO細(xì)說

下面展現(xiàn)瀏覽器自帶的驗證功能請在Chrome、Opera或Firefox中查看：

源代碼：

form name="register1" id="register1"

plabel for="runnername"RunnerName:/label

input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/

/p

plabel for="phone"Tel #:/label

input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"

placeholder="xxx-xxxx-xxxx"http://p

plabel for="emailaddress"E-mail:/label

input id="emailaddress" name="emailaddress" type="email"

placeholder="For confirmation only"http://p

plabel for="dob"DOB:/label

input id="dob" name="dob" type="date"

placeholder="MM/DD/YYYY"http://p

pCount:input type="number" id="count" name="count" min="0" max="100" step="10"http://p

plabel for="style"Shirt style:/label

input id="style" name="style" type="text" list="stylelist" title="Years of participation"

autocomplete="off"http://p

datalist id="stylelist"

option value="White" label="1st Year"/

option value="Gray" label="2nd - 4th Year"/

option value="Navy" label="Veteran (5+ Years)"/

/datalist

fieldset

legendExpectations:/legend

p

label for="confidence"Confidence:/label

input id="confidence" name="level" type="range"

onchange="setConfidence(this.value)"

min="0" max="100" step="5" value="0"/

span id="confidenceDisplay"0%/span/p

plabel for="notes"Notes:/label

textarea id="notes" name="notes" maxLength="100"/textarea/p

/fieldset

pinput type="submit" name="register" value="Submit" onclick=" checkForm()"http://p

/form

html5正則表達(dá)式 怎么驗證表單

通過CSS偽類設(shè)置表單的驗證規(guī)則主要的思路如下： 1、 首先我們要表單設(shè)置驗證規(guī)則 2、 設(shè)置驗證消息 3、 用CSS偽類來控制驗證消息，或者控制input元素的樣式來提示用戶進(jìn)行輸入。 下面我們以這個思路來寫一個小小的示例來以供參考

HTML5中表單驗證的好處

HTML5中表單驗證有如下好處：

1、可判斷用戶是否已填寫表單中的必填項目。

2、可判斷用戶輸入的郵件地址是否合法。

3、可判斷用戶是否已輸入合法的日期。

4、可判斷用戶是否在數(shù)據(jù)域(numeric field)中輸入了文本。

表單驗證通常采用策略模式的思想，把一個個驗證規(guī)則封裝成一個函數(shù)，比如非空規(guī)則、最大長度規(guī)則等，不同的輸入框選擇某一個或者某幾個規(guī)則進(jìn)行驗證。

擴(kuò)展資料：

HTML表單一直都是Web的核心技術(shù)之一，有了它才能在Web上進(jìn)行各種各樣的應(yīng)用。HTML5 Forms新增了許多新控件及其API，方便做更復(fù)雜的應(yīng)用，而不用借助其它Javascript框架。

表單有以下幾個基本知識點：

1、表單仍是以form元素作為容器，可在其中設(shè)置基本的提交特性。

2、當(dāng)用戶提交頁面時，表單仍然向服務(wù)器發(fā)送表單控件的值。

3、之前老版本中的表單控件，如text radio checkbox等等，都可以按原有方式使用，盡管增加了新的功能。

4、仍然可以使用javascript操作表單控件。

HTML5中如何實現(xiàn)表單的自定義驗證消息？

實現(xiàn)表單自定義驗證消息，實際上很簡單。大體思路為:

1、首先我們要設(shè)置表單的驗證規(guī)則

2、然后根據(jù)表單的驗證規(guī)則定義要顯示驗證消息，

3、最后通過JavaScript 和CSS相結(jié)合先將所有預(yù)定義的驗證消息隱藏掉，然后再根據(jù)表單中的輸入是否符合驗證規(guī)則來控制驗證消息的顯隱狀態(tài)。

下面我們就來通過一個具體的示例進(jìn)行講解，你可以將這個示例直接放在瀏覽器中運(yùn)行查看效果，但是要注意代碼中引用了第三方類庫jQuery，運(yùn)行時你要自己設(shè)置一下：

!doctype html

html

head

meta charset="utf-8" /

titleForms: 驗證提示/title

// 設(shè)置一些必要的樣式，如驗證消息的文字樣式和控制驗證消息顯隱的樣式

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的元素都會被隱藏

.hide {

display:none;

}

/style

/head

body

article

h1Formsspan - 驗證提示/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)該遵循的驗證規(guī)則。

//pattern 屬性：規(guī)定用于驗證輸入字段的模式。

//maxlength 屬性：規(guī)定輸入字段的最大長度,以字符個數(shù)計。

//required屬性：規(guī)定該input元素為必須的元素。

label用戶名:/label

input type="text" name="username"

id="username" pattern="[a-zA-Z ]{5,}"

maxlength="30" required /

//設(shè)置表單的驗證消息，并結(jié)合class屬性樣式將其隱藏起來

div

//這里的data-rule的屬性值是HTML5表單中內(nèi)置的驗證規(guī)則中的一種

span data-rule="valueMissing"

class="hide"用戶名不能為空./span

span data-rule="patternMismatch"

class="hide"必須是字母字符(長度應(yīng)為5~30個字符)./span

/div

label郵箱地址:/label

//設(shè)置表單應(yīng)該遵循的驗證規(guī)則。

input type="email" name="email" id="email"

title="Email address is required" required /

//設(shè)置表單的驗證消息，并結(jié)合class屬性樣式將其隱藏起來

div

span data-rule="valueMissing"

郵箱地址不能為空./span

span data-rule="typeMismatch"

郵箱格式不正確./span

/div

hr /

//設(shè)置兩個按鈕，作用分別是“清空表單內(nèi)容和對表單中的內(nèi)容進(jìn)行驗證

button type="submit" id="submit"

name="submit"修改/button

button type="button" id="checkValidation"

name="checkValidation"

class="btn"驗證/button

/fieldset

/form

/div

script

window.onload= function() {

//---

// 創(chuàng)建一個驗證規(guī)則容器。

var ruleNames = [];

// 填充驗證規(guī)則容器.

// 尋找所有具有驗證規(guī)則的元素，然后將該元素的data-rule屬性值添加到驗證規(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)行驗證規(guī)則。

validate = function() {

$(".validation-messages span")

.addClass('hide');

document.getElementById('change-email-form')

.checkValidity();

},

// 查詢每個輸入的元素，以確定哪個元素?zé)o效。

// 一旦檢測到無效元素，就遍歷驗證規(guī)則，找到無效的原因，然后通過消息對用戶進(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 對象的實例來運(yùn)行驗證規(guī)則。

//如果這個驗證規(guī)則返回ture，就表示無法通過驗證，在表單中就會有相應(yīng)的提示信息。

checkRule = function(state, ruleName, ele) {

if (state[ruleName]) {

$(ele).next()

.find('[data-rule="'

+ ruleName + '"]')

.removeClass('hide');

}

};

// 所有驗證事件處理程序是附加在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)知識，希望對你有幫助。

網(wǎng)站名稱：html5表單驗證,css表單驗證
本文地址：http://aaarwkj.com/article48/dsspdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、云服務(wù)器、建站公司、App設(shè)計、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)