html5登录页面表单验证实例,HTML5表单验证（4个实用的表单美化案例）

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

autocomplete="on" 自动补全功能

novalidate 不验证

placeholder

required 必填

autofocus 默认聚焦

pattern 正则验证

dataList对选择框的记忆

list记忆内容

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

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

functioncheckit(obj){

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

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

}else{if (true===it.patternMismatch) {

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

}else{

obj.setCustomValidity("");

}

}

}

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

if(username.checkValidity()) {

alert("用户名符合");

}else{

alert("不符合");

}

自带验证美化

:required

:optional

}input,select,textarea{width:240px;margin:10px 0;border:1px solid #999;padding:.5em 1em;

}label{color:#999;margin-left:10px;

}input:required,textarea:required{border-right:3px solid #aa0088;

}input:optional,select:optional{border-right:3px solid #999;

}input:required +label::after{content:"(必填)"}input:optional +label::after{content:"(选填)"}input:focus,select:focus,textarea:focus{outline:0;

}input:required:focus,textarea:required:focus{box-shadow:0 0 3px 1px #aa0088;

}input:optional:focus,select:required:focus{box-shadow:0 0 3px 1px #999;

}input[type="submit"]{background-color:#cc00aa;border:2px solid #aa0088;padding:10px 0;color:#fff;

}input[type="submit"]:hover{background-color:#aa0088;

}

名称

邮箱

手机

网址

非必选项一

非必选项二

非必选项三

非必选项四