知識要點(diǎn)
1、:valid 用于匹配輸入值為合法的元素
2、:invalid用于匹配輸入值為非法的元素
3、required 屬性規(guī)定必需在提交之前填寫輸入字段
4、pattern 屬性規(guī)定用于驗證輸入字段的正則表達(dá)式
:valid/:invalid 選擇器用于在表單元素中的值是合法/非法時設(shè)置指定樣式。
注意： :valid/:invalid 選擇器只作用于能指定區(qū)間值的元素，例如 input 元素中的 min 和 max屬性，及正確的 email 字段, 合法的數(shù)字字段等。
required 屬性適用于以下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。當(dāng)然textarea也可以。
:valid、:invalid示例
<style>
input{
display: block;
padding: 0 20px;
outline: none;
border: 1px solid #ccc;
width: 150px;
height: 40px;
transition: all 300ms;
}
// input內(nèi)容合法，邊框顏色是綠色
input:valid {
border-color: green;
box-shadow: inset 5px 0 0 green;
}
// input內(nèi)容非法，邊框顏色是紅色
input:invalid {
border-color: red;
box-shadow: inset 5px 0 0 red;
}
</style>
<input type="text" placeholder="請輸入你的手機(jī)" pattern="^1[3456789]d{9}$" required>
預(yù)覽地址：
required示例
...
<form>
<input type="text"
placeholder="請輸入你的手機(jī)"
pattern="^1[3456789]d{9}$"
required
>
<button type="submit">提交</button>
</form>
這時候點(diǎn)擊提交，就好自動校驗了，而且html5會直接添加Tips提示用戶，請看下列示例（雖然樣式不是很美觀）：
喜歡小編或者覺得小編文章對你有幫助的，可以點(diǎn)擊一波關(guān)注哦！同時，要源碼的小伙伴可以點(diǎn)擊下方“了解更多”。
最后推薦一個專欄文章，感謝小伙伴們多多支持，謝謝大家！
