input 屬性

autofocus 頁面加載時自動獲得焦點

required ? 非空字段輸入框

placeholder 提供一種提示（hint),輸入域為空時顯示。

pattern 規(guī)定驗證input域的模式（正則表達式）

pattern="[a-zA-Z0-9],{6,10}"

pattern="[a-zA-Z0-9],{6,16}"

pattern="^1[34578][0-9](9)$"

?

height \width 僅僅用于image的input的屬性

qq注冊認證

validity屬性

validity屬性獲取表單元素的valiityState對象，該對象包括8個方面的驗證結(jié)果

var validityState=dom

<script> var form=document.querySelector('form'); var nick=document.querySelector('#nick'); var vali=nick.validty; console.log(vali);
if(vali.valueMissing){
nick.setCustomValidity("昵稱不能為空”）；
}


invalid 事件，只要發(fā)生表單的驗證，所有未通過驗證的表單元素都會收到一個invalid的事件
form.addEventListener(invalid',function(event{
var ekm=event.target;
var vail=elm.validity;未通過驗證的對象獲取
var name=elm.name;
switch(name){
case'nick';
if(vali.valueMissing){
elm.setCoustomValidity("昵稱不能為空“）；
}else if（vali.patternMIsmatch){
elm.setCoustomvalidity('必須為英文');
else{
elm.setCoustomvalidity('');
}
break;

}




<style>
input:valid{
}驗證通過時的樣式
input：invalid{
}

validityState對象

valueMissing 目的：確保表單中的值已填寫 用法：將表單元素設(shè)置了required特性，則為必填項；如果必填項輸入值為空，value Missing屬性將返回true,否則返回false

typeMismatch?目的：保證輸入值與預(yù)期類型相互匹配（url、Email等）?

patternMismatch 目的：正則是否有效

?

轉(zhuǎn)載于:https://www.cnblogs.com/Gavinzhong/p/6893970.html

總結(jié)

以上是生活随笔為你收集整理的HTML5 表单 中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。