在支持HTML5表單驗(yàn)證的瀏覽器中蚣旱，可以通過表單控件來訪問ValidityState對(duì)象
<form action="#">
<input type="text" name="txt" id="txt" required="" />
<input type="email" name="email" id="email" required="" />
<input type="submit" name="btn" value="submit" />
<br />
<input type="button" value="驗(yàn)證 email 元素" onclick="validateEmail();" />
</form>
function validateEmail(){
var email = document.getElementById("email");
var validityState = email.validity;
alert (
validityState.valid + " " +
validityState.valueMissing + " " +
validityState.typeMismatch + " " +
validityState.patternMismatch + " " +
validityState.tooLong + " " +
validityState.rangeUnderflow + " " +
validityState.rangeOverflow + " " +
validityState.stepMismatch + " " +
validityState.customError);
}
valid屬性表示表單控件是否通過了所有的驗(yàn)證約束條件坪哄，就是最終的驗(yàn)證結(jié)果担映，如果8個(gè)驗(yàn)證條件都通過了持痰，就是true,只要有一個(gè)返回true修陡，valid就是false
valueMissing
設(shè)置了required如果沒填返回true
typeMismatch
type=number不是數(shù)字朽缴，email沒有@
patternMismatch
是否符合正則表達(dá)式
pattern屬性可以設(shè)置控件的正則表達(dá)式驗(yàn)證機(jī)制善玫，需要同時(shí)設(shè)置title告訴用戶這個(gè)規(guī)則
<input type="text" id="country_code" name="country_code" pattern="[A-z]{3}" title="請(qǐng)?zhí)顚?個(gè)字母的國家代碼" />
tooLong
設(shè)置了maxLength，如果超過了返回true
rangeUnderflow
設(shè)置了min值密强，如果小于最小值茅郎，返回true
rangeOverflow
設(shè)置了max值，如果大于最大值或渤，返回true
stepMismatch
設(shè)置了step系冗，如果出現(xiàn)了不滿足step的值，返回true
customeError
自定義驗(yàn)證消息薪鹦，一般用在驗(yàn)證兩次輸入的密碼是否一致
通過setCustomValidity函數(shù)來自定義錯(cuò)誤提示消息
<input type="text" id="password1" onchange="checkPwd()" />
<input type="text" id="password2" onchange="checkPwd()" />
function checkPwd(){
var pwd1 = document.getElementById("password1");
var pwd2 = document.getElementById("password2");
if (pwd1.value != pwd2.value){
pwd1.setCustomValidity("密碼不一致掌敬！");
}else{
pwd1.setCustomValidity("");
}
}
驗(yàn)證反饋
為字段添加invalid事件處理函數(shù)可以接收到驗(yàn)證通知，自定義提示信息池磁，通過preventDefault阻止瀏覽器的默認(rèn)驗(yàn)證處理奔害。
通過e.stopPropagation();方法可以阻止事件冒泡
function handler(e){
var validity = e.srcElement.validity;
if (validity.patternMismatch)
{
alert("格式錯(cuò)誤！");
}
e.preventDefault();
}
document.getElementById("country_code").addEventListener("invalid", handler, false);
關(guān)閉驗(yàn)證
應(yīng)用場(chǎng)景地熄，表單保存的時(shí)候华临，不需要驗(yàn)證
通過設(shè)置formNoValidate屬性來實(shí)現(xiàn)
<input type="submit" name="save" formnovalidate value="保存" />
表單樣式
可以通過偽類來控制驗(yàn)證的樣式
valid 驗(yàn)證通過待提交狀態(tài)
invalid 驗(yàn)證失敗的樣式
in-range 在最大值和最小值之間
out-of-range 不在范圍內(nèi)
required 必須的元素
optional 不是必填的元素
input:invalid {
border:1px solid red;
}
