html表单验证案例,HTML5表单验证（4个实用的表单美化案例）

multipart/form-data 在使用包含文件上传控件的表单时，必须使用

autocomplete="on" 自动补全功能

novalidate 不验证

placeholder

required 必填

autofocus 默认聚焦

pattern 正则验证

inputtype="text"name="gonghao"required autofocus placeholder="请输入工号"pattern="^\d{5}[imooc]$">

dataList对选择框的记忆

list记忆内容

list="tips">

dataListid>

optionvalue="erwerewr"option="erwerew2r"

html5约束验证API

id.validity获取验证约束

console.log(username.validity);

如果输入值长度大于要求的长度，则截取要求的长度部分

functioncheckLength(obj,length) {if (obj.value.length >length) {

obj.value= obj.value.substr(0,length);

}

}

valueMissing => required

typeMismatch => HTML类型，如email

rangeUnderflow => min

-----------------------

checkit(obj){

console.log(obj.validity);var it =obj.validity;if (true===it.valueMissing) {

obj.setCustomValidity("不能为空");

}else{it.patternMismatch) {

obj.setCustomValidity("必须是4个数字");

}{

obj.setCustomValidity("");

}

}

}

checkValidity()满足约束返回true，否则false

if(username.checkValidity()) {

alert("用户名符合");

}{