基本表單驗(yàn)證特性介紹
背景文字
placeholder="請輸入用戶名"html5 表單中新增了以下類型
email、URL、number、range、date（date, month, week, time, datetime, datetime-local ）、search、color、tel等
文本礦中，輸入一次，下一次再輸入會自動提示的特性
autocomplete="on/off"下拉選擇
list 與 datalist初始化頁面后，讓input自動獲得焦點(diǎn)
autofocus="autofocus"設(shè)置表單元素必填
required表單驗(yàn)證使用正則
pattern="^\d{5}[number]$"html5 表單中設(shè)置了必填，提交表單的時(shí)候做到不驗(yàn)證的特性
novalidate(from 中設(shè)置)、formnovalidate(input 按鈕中設(shè)置)
<from action="" method="post" enctype="multipart/form-data" novalidate="novalidate" ></from>
<input type="submit" formnovalidate="formnovalidate">
約束驗(yàn)證API
willValidate 屬性
元素約束是否被符合，未符合返回false-
validity 屬性
ValidityState對象，表示當(dāng)前所處驗(yàn)證狀態(tài)
validityState對象
validationMessage 屬性
描述相關(guān)約束的失敗信息checkValidity() 方法
若元素沒有滿足它的任意約束，返回false，其它情況返回 truesetCustomValidity() 方法
設(shè)置自定義驗(yàn)證信息，用于即將實(shí)施與驗(yàn)證的約束來覆蓋預(yù)定義的提示信息
html
<form name="test" action="" method="post">
<input type="text" required pattern ="^\d{4}$" oninput="checkit(this)" placeholder="請輸入">
<input type="submit" value="驗(yàn)證">
</from>
script
<script>
function checkit(obj){
var it = obj.validity;
if(true === it.valueMissing){
obj.setCustomValidity("不能為空！");
}else{
if(true === it.patternMismatch){
obj.setCustomValidity("必須是4個(gè)數(shù)字");
}
}
</script>
Html 5 自帶驗(yàn)證美化
- 偽類及css選擇器
:required 和 :optional
匹配必填元素 與 選填元素
:in-range 和 :out-of-range
范圍之內(nèi) 與 不在范圍之內(nèi)（與最大值最小值對應(yīng)）
:valid 和 :invalid
符合驗(yàn)證 與 不符合驗(yàn)證
:read-only 和 :read-write
匹配只讀 與 只寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單驗(yàn)證默認(rèn)樣式修改</title>
</head>
<style>
.oneline{line-height: 1.5;margin:10px auto;}
.oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
.oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
.oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;
background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
.error-message{color:red;font-size:12px;text-indent: 108px;}
</style>
<body>
<form>
<div class="oneline">
<label for="name">用戶名:</label>
<input id="name" name="name" class="sinput" required>
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" name="email" class="sinput" type="email" required>
</div>
<div class="oneline">
<input type="submit" value="提交">
</div>
</form>
<script>
function replaceValidationUI( form ) {
// 為from表單增加"驗(yàn)證失敗"監(jiān)聽事件，并且阻止默認(rèn)氣泡
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
}, true );
//監(jiān)聽提交事件，驗(yàn)證不通過時(shí)，阻止默認(rèn)提交事件
form.addEventListener( "submit", function( event ) {
if ( !this.checkValidity() ) {
event.preventDefault();
}
});
var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
submitButton.addEventListener( "click", function( event ) {
// 獲取所有不符合的驗(yàn)證信息，獲取所有錯(cuò)誤信息(為了清除錯(cuò)誤信息)，定義變量插入
var invalidFields = form.querySelectorAll( ":invalid" ),
errorMessages = form.querySelectorAll( ".error-message" ),
parent;
// 刪除錯(cuò)誤信息的父類
for ( var i = 0; i < errorMessages.length; i++ ) {
errorMessages[ i ].parentNode.removeChild( errorMessages[ i ] );
}
// 獲取沒有通過驗(yàn)證的錯(cuò)誤信息，為錯(cuò)誤信息的父類添加我們自己的樣式
for ( var i = 0; i < invalidFields.length; i++ ) {
parent = invalidFields[ i ].parentNode;
// insertAdjacentHTML() 知識點(diǎn)
parent.insertAdjacentHTML( "beforeend", "<div class='error-message'>" +
invalidFields[ i ].validationMessage +
"</div>" );
}
// 如果有錯(cuò)誤信息，第一個(gè)定位焦點(diǎn)
if ( invalidFields.length > 0 ) {
invalidFields[ 0 ].focus();
}
});
}
// 通過css選擇器獲取所有form表單
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
replaceValidationUI( forms[ i ] );
}
</script>
