整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html5 中，在增加了大量的表單元素與屬性的同時(shí)，也增加了大量在提交時(shí)對表單與表單內(nèi)新增元素進(jìn)行內(nèi)容有效性驗(yàn)證的功能，接下來我們來說1下自動(dòng)驗(yàn)證。
在html5中，通過對元素使用屬性的方法，可以實(shí)現(xiàn)在表單提交時(shí)履行自動(dòng)驗(yàn)證的功能，在履行代碼后，將在表單提交時(shí)自動(dòng)驗(yàn)證輸入的內(nèi)容是不是為數(shù)字，如果驗(yàn)證通不過，將顯示毛病信息文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗(yàn)證示例</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="提交">
</form>
</body>
</html>
接下來我們來看1下在html5 中追加的關(guān)于對元素內(nèi)輸入內(nèi)容進(jìn)行限制的屬性的指定。
1.required屬性
html5 中新增的required屬性可以利用在大多數(shù)輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時(shí)，如果元素中內(nèi)容為空白。則不允許提交，同時(shí)在閱讀器中顯示信息提示文字，提示用戶這個(gè)元素中必須輸入內(nèi)容，效果如圖
2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內(nèi)容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設(shè)置為某個(gè)格式的正則表達(dá)式，在提交時(shí)會(huì)檢查其內(nèi)容是不是符合給定格式。當(dāng)輸入的內(nèi)容不符合給定格式時(shí)，則不允許提交，同時(shí)在閱讀器中顯示信息提示文字，提交輸入的內(nèi)容必須符合給定格式，代碼以下，要求輸入內(nèi)容為1個(gè)數(shù)字與3個(gè)大寫字母：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗(yàn)證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入指定內(nèi)容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個(gè)數(shù)字3個(gè)大寫字母">
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
3.min屬性與max屬性
min與max這兩個(gè)屬性是日期類型或數(shù)值類型的input元素的專用屬性，他們限制了在input元素中輸入的數(shù)值與日期的范圍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗(yàn)證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入數(shù)值:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
4.step屬性
step屬性控制input元素中的值增加過減少時(shí)的步驟。例如當(dāng)你想讓用戶輸入的值在0與100之間，但必須是5的倍數(shù)時(shí)，你可以指定step為5，代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗(yàn)證示例</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>
效果以下：
原文：http://www.wfuyu.com/htmlcss/27520.html
<form method="提交方式" action="提交地址">
表單元素
</form>
1. <input type="元素類型" name="元素名稱" />
2. 特殊的
<select>
<option value="選項(xiàng)的值">選項(xiàng)的文本</option>
...
</select>
<textarea name="" rows="行數(shù)" cols="列數(shù)">值</textarea>
1. 用來填的
text : 單行文本框
password : 密碼框
textarea : 多行文本框
email : 郵件地址輸入框
url : 網(wǎng)址輸入框
number : 數(shù)字輸入框
屬性:
size可以控制寬度
maxlength可以控制最大輸入的字符數(shù)
max(最大值), min(最小值)對number，range有效
2. 用來選的
checkbox : 復(fù)選框
radio : 單選框
select : 下拉列表框
屬性:
checked用于默認(rèn)選中radio和checkbox
selected用于默認(rèn)選中select中的option選項(xiàng)
value用于設(shè)置元素的值
3. 用來點(diǎn)的
submit : 提交按鈕
reset : 重置按鈕
button : 一般按鈕, 沒有功能
image : 圖片按鈕, 功能上等同于submit
4. 其它的
file : 文件域, 用于文件上傳
hidden : 隱藏域, 作用不明
range：滑塊
設(shè)置表單要注意的地方
1. 一組radio應(yīng)該設(shè)置相同的name, 這樣才能"互斥"
2. 除按鈕外, 其它表單元素都應(yīng)該設(shè)置name屬性
3. 用于選擇的元素都應(yīng)該設(shè)置value
表單元素的只讀和禁用
readonly
disabled
使用label提高用戶體驗(yàn)
label稱為"標(biāo)注", 可以擴(kuò)大表單元素的可操作區(qū)域, 點(diǎn)擊label就等價(jià)于點(diǎn)擊了對應(yīng)的表單元素.
方式一:
<label for="表單元素的id">文本</label>
方式二:
<label>
文本
<input />
</label>
1. 用戶提示
<input placeholder="提示信息" />
2. 用required實(shí)現(xiàn)必填驗(yàn)證
<input required="required" />
3. 用pattern實(shí)現(xiàn)復(fù)雜的文本信息驗(yàn)證(正則表達(dá)式)
<input pattern="[a-zA-Z]{4,9}" /> //必須由4-9位字母組成
<input pattern="1[35][0-9]{9}" /> //必須是13xxxxxxxxx或15xxxxxxxxx
<input pattern="[\u4E00-\u9FA5]{5}" /> //必須由5位中文字符組成
注意: email, url等元素自帶pattern驗(yàn)證規(guī)則
文共3663字，預(yù)計(jì)學(xué)習(xí)時(shí)長11分鐘
來源：Pexels
表單驗(yàn)證是使用HTML5時(shí)的一個(gè)內(nèi)置特性，HTML5提供了各種驗(yàn)證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數(shù)據(jù)發(fā)送到服務(wù)器之前，我們可以使用它來驗(yàn)證表單輸入。但是，我們應(yīng)該信任發(fā)送的內(nèi)容，所以最終驗(yàn)證應(yīng)該仍然在服務(wù)器上進(jìn)行。
當(dāng)表單輸入有效時(shí)，要素將顯示:valid 偽類樣式表。如果它是無效的，那么則出現(xiàn):invalid 偽類樣式表。
當(dāng)表單輸入無效時(shí)，瀏覽器將阻止表單提交并顯示錯(cuò)誤信息。
Pattern
Pattern應(yīng)用于文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。
·它將正則表達(dá)式設(shè)置為數(shù)值，然后瀏覽器對其進(jìn)行驗(yàn)證。
Min
該屬性適用于范圍、數(shù)字、日期、月、周、時(shí)間、本地時(shí)間等類型的輸入元素。
·當(dāng)輸入范圍或數(shù)字時(shí)，它會(huì)檢驗(yàn)該值是否大于或等于Min屬性的給定值。
·當(dāng)輸入日期、月份或星期時(shí)，它會(huì)檢驗(yàn)日期是否為該屬性給定日期或在給定日期之后。
·當(dāng)輸入時(shí)間時(shí)，它會(huì)檢驗(yàn)日期和時(shí)刻是否都大于或等于該屬性給定時(shí)期。
Max
Max屬性是min屬性的對立面，它檢查輸入的內(nèi)容是否小于或等于該屬性的給定值。
·當(dāng)應(yīng)用于范圍或數(shù)字類型的輸入時(shí)，它將檢查輸入的數(shù)字是否小于或等于min屬性的給定值
·當(dāng)應(yīng)用于日期、月份或星期等類型的元素時(shí)，它將檢查日期是否小于或等于該屬性值中給定的日期。
·當(dāng)應(yīng)用于時(shí)間類型輸入時(shí)，它將檢查日期和時(shí)間是否小于或等于min屬性的給定值。
Required
該屬性驗(yàn)證輸入元素是否為空。
·它可以用于文本、檢索、鏈接、電話、郵件、密碼、日期、時(shí)間、月份、星期、數(shù)字、復(fù)選框、錄音、文檔，以及被選中內(nèi)容和文本框等元素。
來源：Pexels
Step
Step檢驗(yàn)輸入值是否為整數(shù)。
·若輸入日期類型的元素，它會(huì)檢查天數(shù)是否為整數(shù)。
·若輸入月份類型的元素，它會(huì)檢查月份數(shù)是否為整數(shù)。
·若輸入星期類型的元素，它會(huì)檢查星期數(shù)是否為整數(shù)。
·若輸入時(shí)間類型的元素，它會(huì)檢查秒數(shù)是否為整數(shù)。
·若輸入范圍和數(shù)字類型的元素，它會(huì)檢查范圍和數(shù)值是否為整數(shù)。
Minlength
Minlength屬性可應(yīng)用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字?jǐn)?shù)是否大于或等于該屬性值。
Maxlength
Maxlength屬性同樣可應(yīng)用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字?jǐn)?shù)是否小于或等于該屬性值。
我們可以通過將表單驗(yàn)證屬性添加到元素中來使用它們。例如，編寫一份以電子郵件地址作為輸入的表單。
第一步，輸入以下HTML語言：
<formid='form'> <labelfor="email">What's your email address?</label> <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+"> <buttontype='submit'>Submit</button></form>在上述代碼中，輸入元素帶有required屬性，根據(jù)設(shè)定進(jìn)行輸入。
同時(shí)，我們還以電子郵件地址的正則表達(dá)式作為值，對其添加pattern屬性。
接著如下所示，當(dāng)輸入有效或無效時(shí)，我們通過添加樣式表來改變輸入元素的邊界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}來源：view rawinput.css 平臺(tái)： GitHub
此處會(huì)用到文章開頭提及的偽類樣式來完成這一步驟。
最后，通過調(diào)用preventDefault來添加JavaScript代碼以防止本例中的表單提交。
constform = document.querySelector('#form');form.onsubmit = (e) => { e.preventDefault();}
再舉一個(gè)檢查輸入的長度和范圍的例子。比如，編寫如下 HTML代碼來獲取用戶的姓名和年齡：
<formid='form'> <labelfor="name">What's your name?</label> <inputid="name" name="name" requiredminlength='5' maxlength='20'> <br> <spanid='name-too-short' hidden>Name is too short</span> <spanid='name-too-long' hidden>Name is too long</span> <br> <labelfor="age">What's your age?</label> <inputid="age" name="age" type='number' requiredmin='0' max='150'> <br> <spanid='age-too-high' hidden>Age is too high</span> <spanid='age-too-low' hidden>Age is too low</span> <br> <buttontype='submit'>Submit</button></form>輸入的姓名和年齡都具有長度和范圍屬性，當(dāng)輸入無效時(shí)，可以看到以文中所示形式出現(xiàn)的輸入信息。
與例一相同，當(dāng)輸入元素有效或無效時(shí)，輸入樣式表來更改輸入框邊界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}最后，當(dāng)輸入無效時(shí)可以通過JavaScript看到驗(yàn)證信息：
const form = document.querySelector('#form');const name = document.querySelector('#name');const age = document.querySelector('#age');const nameTooShort = document.querySelector('#name-too-short');const nameTooLong = document.querySelector('#name-too-long');const ageTooLow = document.querySelector('#age-too-low');const ageTooHigh = document.querySelector('#age-too-high');form.onsubmit= (e) => { e.preventDefault();}name.oninput= (e) => { nameTooShort.hidden=true; nameTooLong.hidden=true; if (e.srcElement.validity.tooShort) { nameTooShort.hidden=false; }if (e.srcElement.validity.tooLong) { nameTooLong.hidden=false; }}age.oninput= (e) => { ageTooLow.hidden=true; ageTooHigh.hidden=true; if (e.srcElement.validity.rangeOverflow) { ageTooHigh.hidden=false; }if (e.srcElement.validity.rangeUnderflow) { ageTooLow.hidden=false; }}在上述代碼中，將oninput事件處理程序設(shè)置為事件處理程序函數(shù)，以便檢查后續(xù)輸入的有效性。
在每個(gè)函數(shù)中，我先隱藏所有信息，這樣就不會(huì)看到過時(shí)的消息了。然后，根據(jù)設(shè)置的最小和最大長度來檢查名稱輸入是否太短或太長。
若出現(xiàn)任何錯(cuò)誤，會(huì)在HTML中取消隱藏相應(yīng)的信息。
來源：Pexels
同樣，我們根據(jù)長度的最大最小設(shè)定值來檢驗(yàn)?zāi)挲g輸入值是否在所屬區(qū)間內(nèi)。若出現(xiàn)錯(cuò)誤，我們會(huì)在HTML中取消隱藏相應(yīng)的信息。
通過HTML5和JavaScript，不需要任何函數(shù)庫就可以檢驗(yàn)各種類型輸入值的有效性。
我們可以檢驗(yàn)長度、范圍、任何帶有正則表達(dá)式的模式等輸入元素，但在保存之前應(yīng)當(dāng)檢查服務(wù)器端，因?yàn)椴糠钟脩羧钥梢云平鉃g覽器端應(yīng)用程序來跳過驗(yàn)證。
留言點(diǎn)贊關(guān)注
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
如轉(zhuǎn)載，請后臺(tái)留言，遵守轉(zhuǎn)載規(guī)范
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
