emali：電子郵箱文本框，跟普通的沒什么區別
-當輸入不是郵箱的時候，驗證通不過
-移動端的鍵盤會有變化
<form>
<input type="email">
<input type="submit">
</form>
tel：電話號碼
tel的功能主要在移動端，一個鍵盤的切換
url：網頁的URL
<form>
<input type="url">
<input type="submit">
</form>
search：搜索引擎
----charome下輸入文字后，會多出一個關閉的X
<form>
<input type="search">
<input type="submit">
</form>
range：特定范圍內的數值選擇器
-min、max、step(步數)
-例子：用JS來顯示當前數值
<form>
<input type="range" step="2" min="0" max="10" value="2">
<input type="submit">
</form>
number：只包含數字的輸入框
<form>
<input type="numberl">
<input type="submit">
</form>
color：顏色選擇器
<form>
<input type="colorl">
<input type="submit">
</form>
datetime：顯示完整的日期
<form>
<input type="datetime">
<input type="submit">
</form>
datetime-local：顯示完整日期 不含時區
<form>
<input type="datetime-local">
<input type="submit">
</form>
time：顯示時間，不含時區
<form>
<input type="time">
<input type="submit">
</form>
date：顯示時間
<form>
<input type="date">
<input type="submit">
</form>
week：顯示周
<form>
<input type="weekl">
<input type="submit">
</form>
month：顯示月
<form>
<input type="month">
<input type="submit">
</form>
placeholder：輸入框提示信息
<form>
<input type="text" placeholder="輸入4~16個字符">
<input type="submit">
</form>
autocomplete：是否保存用戶輸入值
-默認為on，關閉提示選擇off
<form>
<input type="text" name="" autocomplete="off">
<input type="submit">
</form>
autofocus：指定表單獲取輸入焦點
<form>
<input type="text" name="user" autofocus>
<input type="password" name="password">
<input type="submit">
</form>
required：此項必填，不能為空
<form>
<input type="text" name="user" required>
<input type="password" name="password" required>
<input type="submit">
</form>
patten：正則驗證 pattern="\d{1,5}"
<form>
<input type="text" name="user" pattern=“\d{1,5}’”>
<input type="submit">
</form>
formaction在submit里定義提交地址
<form>
<input type="text" name="user" pattern="\d{1,5}">
<input type="submit" value="提交">
<input type="submit" vaue="保存至草稿箱" formaction="www.baidu.com">
</form>
validity對象，通過下面的valid可以查看驗證是否通過，如果八種驗證都通過返回true，一種驗證失敗返回false
-oText.addEventListener("invalid",fn1,false);
-ev.preventDefault() ; 阻止默認事件
-valueMissing : 輸入值為空時
-typeMismatch : 控件值與預期類型不匹配
-patternMismatch : 輸入值不滿足pattern正則
-tooLong : 超過maxLength最大限制
-rangeUnderflow : 驗證的range最小值
-rangeOverflow：驗證的range最大值
-stepMismatch: 驗證range 的當前值 是否符合min、max及step的規則
-customError 不符合自定義驗證
》setCustomValidity(); 自定義驗證
typeMismatch：控件值與預期類型不匹配返回true
<form>
<input type= “email" id= “text">
<input type= "submit“>
</form>
patternMismatch：輸入值不滿足pattern正則返回true
<form>
<input type= "txet" id= “text" pattern="\d{1,5}">
<input type= "submit“>
</form>
tooLong：超過maxLength最大限制
<form>
<input type= “email" id= “text" maxlength="5">
<input type= "submit“>
</form>
rangeUnderflow：驗證的range最小值
rangeOverflow：驗證的range最大值
stepMismatch：驗證range的當前值是否符合min、max及step的規則
<form>
<input type= “range" value="0" min="2" max="10" step="2">
<input type= "submit“ value="提交">
</form>
customError：不符合自定義驗證
oText.oninput = function(){
if(this.value=="敏感詞"){
this.setCustomValidity("請不要輸入敏感詞");
}else{
this.setCustomValidity("")
}
}
function fn(){
alert(this.validity.customError)
ev.preventDefault()
}
<form>
<input type= “text" id= “text">
<input type= "submit“ value="提交">
</form>
Invalid事件：驗證反饋
input.addEventListener('invalid'，fn，false)
阻止默認驗證：ev.preventDefault
formnovalidate屬性：關閉驗證
<form action= "http://www.baidu.com">
<input type= "text" id= "text" placeholder= "請輸入4~16個字符" name= “user" pattern= "\d{1,5}" required />
<input type= "submit" value= "提交"/>
<input type= " submit" value= "保存至草稿箱" formaction= http://www.baidu.com formnovalidate/>
</form>