html5驗證,html5驗證碼代碼

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

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供柯橋企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為柯橋眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

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

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

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

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

// 首先確定用戶界面隱藏了所有驗證消息。

// 然后在選定的表單上運行驗證規(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 對象的實例來運行驗證規(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)知識，希望對你有幫助。

HTML5新增驗證屬性 設(shè)置環(huán)境變量

HTML5新增驗證屬性:

placeholder ??提供一種提示（hint），輸入域為空時顯示，獲得焦點輸入內(nèi)容后消失

required ? ?規(guī)定輸入域不能為空

pattern ? ?規(guī)定驗證input域的模式（正則表達(dá)式）

validity屬性:

環(huán)境變量設(shè)置參數(shù)如下：

變量名： JAVA_HOME

變量值： C:\Program Files (x86)\Java\jdk1.8.0_91 ?// 要根據(jù)自己的實際路徑配置

變量名： CLASSPATH

變量值： .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; ?//記得前面有個"."

變量名： Path

變量值： %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

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中表單內(nèi)置驗證規(guī)則是什么，有哪些內(nèi)置驗證規(guī)則呢？

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

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 pattern 既要驗證格式又要驗證長度怎么辦

html5 pattern?既要驗證格式又要驗證長度的解決辦法是用正則表達(dá)式實現(xiàn)。

1、在html5頁面中有如下form：

form id="myform"

input type="text" name="fullname" pattern="[A-Za-z0-9\w]{4,20}" required="required" /

input type="submit" /

/form

在提交的時候做fullname的校驗：要求是字母和數(shù)字，長度是4到20位之間。

2、jquery代碼如下：

$(document).ready(function () {

$('#myform').validate({debug:true});

});

3、校驗在提交的時候生效：

輸入zhangsan123就可以正確提交。

輸入張三就會報錯：

html5中input的tel類型怎么驗證正則

html5中input的tel類型驗證正則的寫法如下：

一般在中國，電話號碼是區(qū)號-7到8位數(shù)字的電話號碼，所以正則表達(dá)式書寫如下：

^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}

完整的演示例子如下：

1、html5中的tel標(biāo)簽：

input type="tel" name="tel" id="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"

2、或者

input type="tel" name="tel" id="tel" required onblur="checkme(this)"/

function checkme(obj){

var val=obj.value();

var mobilevalid = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;

if (!mobilevalid.test(val)) {

alert('請輸入正確的手機(jī)號碼！')

return false;

}

}

分享題目：html5驗證,html5驗證碼代碼
本文URL：http://muchs.cn/article32/phidpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、App設(shè)計、企業(yè)建站、全網(wǎng)營銷推廣、企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化

廣告

聲明：本網(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)