【HTML5新表單】
1.type:
- email ：
驗證邏輯不完整，只驗證是否包含 @ ；
- search ：
- url ：
驗證邏輯不完整，只判斷是否包含 http:// ；
- tel ：
電話號碼類型:
只能在移動端有效果，會彈出數字鍵盤；只能輸入數字；
pc端，可以輸入英文；
- number :
數字類型：3個屬性；
min:
max:
step: 默認值1；
- range ：
范圍類型:
min：
max：
step：
value：當前值；
- color ：
顏色類型：取色器；
- date :
日期類型；
- week : 周
- month : 月
2.新表單元素
- datalist元素
定義備選項，與option
與input text搭配使用，input的list屬性指向datalist的id；
特點：
數據與結構分離；預定義數據在datalist，結構input；
<datalist id="mylist">
<option>請選擇</option>
<option>北京</option>
<option>南京</option>
<option>天津</option>
</datalist>
<input type="text" list="mylist"><br>
- progress元素
進度條；
不同浏覽器效果不同；2屬性；
- max 沒有min屬性，最小默認為0；
- value 當前進度值；
<progress max="100" value="0" id="progress"></progress>
<script>
function mychange(){
var progress = document.getElementById("progress");
var value = progress.value;
value++;
progress.value = value;
if(value == 100){
clearTimeout(t);
}
t = setTimeout("mychange()",100);
}
mychange();
</script>
- meter元素
刻度；
- min
- max
- value
- low 低預警值
- high 高預警值
- output元素
輸出；
for屬性
3.表單新屬性
- placeholder屬性：
類似於value； placeholder="請輸入用戶名";
默認文本是灰色，並且 文本框獲取焦點，輸入時，默認文字自動消除；
- multiple屬性：
允許文本框中輸入多個值，用","隔開；
只定義屬性名，沒有屬性值
- autofocus屬性
自動獲取焦點
只定義屬性名，沒有屬性值
- form屬性
值等於表單元素的id值；
允許表單元素定義在表單之外；
4.表單新驗證
1.驗證屬性
- required :
驗證為空；
提交時才提示；
- pattern ：
不要斜線；pattern="[a-z]{6,12}"
使用正則表達式驗證元素值是否匹配；
驗證不了空；
提交時才提示；
- min max
驗證當前元素值的最小值和最大值；
適用於type=number類型
提交時才提示；
- minlength maxlength
驗證當前元素值的最小長度和最大長度；
提示是英文的；
minlength:提交時才提示；不是H5的新屬性；
maxlength:輸入時長度就不能大於指定值；
- validity
表單驗證在H5中提供一個有效狀態；有效狀態通過validityState對象獲取到，
validityState對象可以通過validity屬性得到；
2.驗證(有效)狀態
validityState對象提供一系列有效狀態
***所有驗證狀態要配合驗證屬性使用；
- valid
元素所有"驗證都通過"就返回true；
Elem.validity.valid;
以下驗證返回true，都是驗證錯誤；
- valueMissing
判斷當前元素值是否為空。返回true false;
配合required使用；
Elem.validity.valueMissing;
- typeMismatch
判斷當前元素是否匹配類型type；返回true false;
配合email，number，url使用；
email.validity.typeMismatch;
- patternMismatch
判斷當前元素是否匹配正則表達式；返回true false;
配合pattern使用；
Elem.validity.patternMismatch;
- tooLong
判斷當前元素是否匹配長度；返回true false;
配合maxlength；
**使用maxlength屬性後，長度不會超出maxlength的值，tooLong很難出現這種情況；****邏輯完整性；
- rangeUnderflow
輸入內容值小於min的值時，返回true；
只能匹配min 不能與max比較；
Elem.validity.rangeUnderflow;
- stepMismatch
判斷當前元素值是否與step設置相同；
只能匹配step，不和min max比較；
Elem.validity.stepMismatch;
- customError
配合setCustomValidity()方法使用；只要用了此方法，customError就返回true；
setCustomValidity()：
作用：設置驗證失敗後的默認提示信息；
問題：一旦使用該方法修改默認提示信息後，即使輸入正確，錯誤提示信息依舊出現；
解決：當輸入正確時，調用該方法將信息設置為空"";
<!DOCTYPE html>
<html>
<head>
<title>表單驗證狀態(完整)</title>
<meta charset="utf-8" />
</head>
<body>
<form>
用戶名:<input type="text" id="user" required><br>
email地址:<input type="email" id="email"><br>
密碼:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br>
確認密碼:<input type="text" id="repwd" maxlength="10"><br>
年齡:<input type="number" id="age" min="10" max="20"><br>
成績:<input type="number" id="score" min="60" max="100" step="10">
<input type="submit" value="注冊">
</form>
<script>
var user = document.getElementById("user");
user.onblur = function(){
if(user.validity.valueMissing){
console.log("用戶名不能為空.");
}
}
var email = document.getElementById("email");
email.onblur = function(){
if(email.validity.typeMismatch){
console.log("email輸入格式錯誤.");
}
}
var pwd = document.getElementById("pwd");
pwd.onblur = function(){
if(pwd.validity.patternMismatch){
console.log("密碼輸入錯誤.");
}
}
var repwd = document.getElementById("repwd");
repwd.onblur = function(){
if(repwd.validity.tooLong){
console.log("密碼輸入過長.");
}
}
var age = document.getElementById("age");
age.onblur = function(){
if(age.validity.rangeUnderflow){
console.log("年齡過小,不符合!");
}
}
var score = document.getElementById("score");
score.onblur = function(){
if(score.validity.valid){
console.log("成績輸入正確.");
}else if(score.validity.stepMismatch){
console.log("成績輸入不符.");
}
}
</script>
</body>
</html>