multipart/form-data 在使用包含文件上传控件的表单时，必须使用
autocomplete="on" 自动补全功能
novalidate 不验证
<form enctype="multipart/form-data" novalidate autocomplete="on"></form>
placeholder
required 必填
autofocus 默认聚焦
pattern 正则验证
input type="text" name="gonghao" required autofocus placeholder="请输入工号" pattern="^\d{5}[imooc]$">
dataList对选择框的记忆
list记忆内容
list="tips"> dataList id> option value="erwerewr"option="erwerew2r"</dataList>
html5约束验证API
id.validity获取验证约束
console.log(username.validity);
如果输入值长度大于要求的长度，则截取要求的长度部分
<input type="number" id="numbers" oninput="checkLength(this,5)" step="0.01" />
function checkLength(obj,length) {
if (obj.value.length > length) {
obj.value = obj.value.substr(0,length);
}
}
valueMissing => required
typeMismatch => HTML类型，如email
rangeUnderflow => min
<input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
-----------------------
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("用户名符合"); } { alert("不符合"); }
自带验证美化
:required
:optional
<!DOCTYPE html> html lang="en"head> meta charset="UTF-8"titlestyle> .container{ max-width:400px; margin20px auto; } input,select,textarea width 240px10px 0 border1px solid #999 padding .5em 1em label color#999 margin-left 10px input:required,textarea:required border-right3px solid #aa0088 input:optional,select:optional3px solid #999 input:required +label::after content "（必填）" input:optional +label::after "（选填）" input:focus,select:focus,textarea:focus outline0 input:required:focus,textarea:required:focus box-shadow 0 0 3px 1px #aa0088 input:optional:focus,select:required:focus 0 0 3px 1px #999 input[type="submit"] background-color #cc00aa 2px solid #aa0088#fff input[type="submit"]:hover#aa0088} body<!-- <div class="contenteditable"></div> --> div class="container"action="#"="name" required><label>名称="email">邮箱="tel">手机="url">网址select name="" id=""> >非必选项一>非必选项二>非必选项三>非必选项四selecttextarea ="#" cols="30" rows="10" placeholder="留言（必填）"textarea="submit" value="提交表单"divhtml>
:valid
:invalid
>纯CSS表单验证美化（invalid和valid）应用案例100px positionrelative input 1px solid #999140px height30px line-heighttext-indent36pxtransition all .3s border-radius5px span.titleabsolute 30px left2px top transitionall .3s text-indent input:focus+span.title,input:hover+span.title transformtranslateX(-120%) input:valid ~label::after "你输入正确！" input:invalid ~label::after "你邮箱错误！" input:valid1px solid green input:invalid1px solid red="mail" type required placeholder="输入邮箱"span ="title"spanlabel for="mail">
oninvalid
oninput
="utf-8"http-equiv="X-UA-Compatible" content="IE=edge">html5表单美化综合案例="viewport"="initial-scale=1,maximum-scale=1" .onelist margin 10px 0 5px 12px; .onelist label width 80px display inline-block .onelist input,.onelist select height 25px line-height 220px border-radius 3px border 1px solid #e2e2e2 .onelist input[type="submit"] 150px select:required,input:required,textarea:required background #fff url(../img/star.jpg) no-repeat 99% center select:required:valid,input:required:valid,textarea:required:valid #fff url(../img/right.png) no-repeat 99% center box-shadow 0 0 5px #5cd053 border-color #28921f select:focus:invalid,input:focus:invalid,textarea:focus:invalid #fff url(../img/error.png) no-repeat 99% center 0 0 5px red red outline red solid 1px} > ="myform" onsubmit="return checkForm();" method="post"="onelist"="UserName">手机号="UserName"="请输入手机号码"="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')"="Password">密码="Password"="password"="6~20位" class="^[a-zA-Z0-9]\w{5,19}$"="this.setCustomValidity('请输入正确密码');"="setCustomValidity('')" onchange="checkPassword()"="Repassword">确认密码="Repassword"="确认密码" required onchange>了解方式="konw">==请选择==="1">搜索引擎="2">朋友圈="3">朋友推广="4">广告投放="提交"script ="text/javascript"> function checkPassword() { var pass1 = document.getElementById("Password); pass2 Repassword); if (pass1.value != pass2.value) // 设置自定义验证约束提示信息 pass2.setCustomValidity(两次输入的密码不匹配else pass2.setCustomValidity(""); } script>
默认气泡修改
event.preventDefault(); 阻止默认气泡
="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">表单验证默认样式修改 .onelineline-height 1.5margin10px auto .oneline labelwidth 15pxfont-size14pxfont-family "Microsoft Yahei"display inline-block .oneline .sinput60%heightborder-radius 6pxborder1px solid #e2e2e2 .oneline input[type="submit"]margin-left20px80pxbackground-color#5899d0color .error-messagered font-size12px108px="forms"="oneline"="name">用户名:="sinput"="email">Email:="提交"="thesubmit" replaceValidationUI(form) { form.addEventListener(invalid(event) { event.preventDefault(); },1)">true); form.addEventListener(submit(event) { (!this.checkValidity()) { event.preventDefault(); } },1)"> submitButton thesubmit); submitButton.addEventListener(click inValidityField form.querySelectorAll(:invalid),errorMessage .error-messagefor i = ; i < errorMessage.length; i++) { errorMessage[i].parentNode.removeChild(errorMessage[i]); } inValidityField.length; i) { parent inValidityField[i].parentNode; parent.insertAdjacentHTML(beforeend<div class='error-message'>" + inValidityField[i].validationMessage + </div>) } (inValidityField.length > ) { inValidityField[].focus(); } }) } form forms); replaceValidationUI(form); >