99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

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

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

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)行查看效果，但是要注意代碼中引用了第三方類庫(kù)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ī)定輸入字段的最大長(zhǎng)度,以字符個(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"必須是字母字符(長(zhǎng)度應(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效。

// 一旦檢測(cè)到無效元素，就遍歷驗(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ì)你有幫助。

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

HTML5新增驗(yàn)證屬性:

placeholder ??提供一種提示（hint），輸入域?yàn)榭諘r(shí)顯示，獲得焦點(diǎn)輸入內(nèi)容后消失

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

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

validity屬性:

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

變量名： JAVA_HOME

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

變量名： CLASSPATH

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

變量名： Path

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

HTML5中表單驗(yàn)證的好處

HTML5中表單驗(yàn)證有如下好處：

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

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

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

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

表單驗(yàn)證通常采用策略模式的思想，把一個(gè)個(gè)驗(yàn)證規(guī)則封裝成一個(gè)函數(shù)，比如非空規(guī)則、最大長(zhǎng)度規(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操作表單控件。

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

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

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)。例如，在示例中我們?cè)O(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ì)說明：如果輸入值的長(zhǎng)度超過maxLength，示例中最大限制設(shè)置為3，但值為hello，操過了3個(gè)字符的限制，tooLong規(guī)則就會(huì)返回true。雖然表單控件通常會(huì)在用戶輸入時(shí)限制最大長(zhǎng)度，但在有些情況下，如通過程序設(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 pattern 既要驗(yàn)證格式又要驗(yàn)證長(zhǎng)度怎么辦

html5 pattern?既要驗(yàn)證格式又要驗(yàn)證長(zhǎng)度的解決辦法是用正則表達(dá)式實(shí)現(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

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

2、jquery代碼如下：

$(document).ready(function () {

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

});

3、校驗(yàn)在提交的時(shí)候生效：

輸入zhangsan123就可以正確提交。

輸入張三就會(huì)報(bào)錯(cuò)：

html5中input的tel類型怎么驗(yàn)證正則

html5中input的tel類型驗(yàn)證正則的寫法如下：

一般在中國(guó)，電話號(hào)碼是區(qū)號(hào)-7到8位數(shù)字的電話號(hào)碼，所以正則表達(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('請(qǐng)輸入正確的手機(jī)號(hào)碼！')

return false;

}

}

分享題目：html5驗(yàn)證,html5驗(yàn)證碼代碼
網(wǎng)頁地址：http://www.ef60e0e.cn/article/phidpc.html