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("用户名符合");

}{

alert("不符合");

}

自带验证美化

:required

:optional

htmllang="en"head>

charset="UTF-8"titlestyle>.container{max-width:400px;margin20px auto;

}input,select,textareawidth240px10px 0border1px solid #999padding.5em 1emlabelcolor#999margin-left10pxinput:required,textarea:requiredborder-right3px solid #aa0088input:optional,select:optional3px solid #999input:required +label::aftercontent"(必填)"input:optional +label::after"(选填)"input:focus,select:focus,textarea:focusoutline0input:required:focus,textarea:required:focusBox-shadow0 0 3px 1px #aa0088input:optional:focus,select:required:focus0 0 3px 1px #999input[type="submit"]background-color#cc00aa2px solid #aa0088#fffinput[type="submit"]:hover#aa0088}

body

divclass="container"action="#"="name">名称="email">邮箱="tel">手机="url">网址selectname=""id="">

>非必选项一>非必选项二>非必选项三>非必选项四selecttextarea="#"cols="30"rows="10"placeholder="留言(必填)"textarea="submit"value="提交表单"divhtml>

:valid

:invalid

@H_196_403@

>纯CSS表单验证美化(invalid和valid)应用案例100pxpositionrelativeinput1px solid #999140pxheight30pxline-heighttext-indent36pxtransitionall .3sborder-radius5pxspan.titleabsolute30pxleft2pxtoptransitionall .3stext-indentinput:focus+span.title,input:hover+span.titletransformtranslateX(-120%)input:valid ~label::after"你输入正确！"input:invalid ~label::after"你邮箱错误！"input:valid1px solid greeninput:invalid1px solid red="mail"typerequired placeholder="输入邮箱"span="title"spanlabelfor="mail">

oninvalid

oninput

="utf-8"http-equiv="X-UA-Compatible"content="IE=edge">html5表单美化综合案例="viewport"="initial-scale=1,maximum-scale=1".onelistmargin10px 0 5px 12px;

.onelist labelwidth80pxdisplayinline-block.onelist input,.onelist selectheight25pxline-height220pxborder-radius3pxborder1px solid #e2e2e2.onelist input[type="submit"]150pxselect:required,input:required,textarea:requiredbackground#fff url(../img/star.jpg) no-repeat 99% centerselect:required:valid,input:required:valid,textarea:required:valid#fff url(../img/right.png) no-repeat 99% centerBox-shadow0 0 5px #5cd053border-color#28921fselect:focus:invalid,input:focus:invalid,textarea:focus:invalid#fff url(../img/error.png) no-repeat 99% center0 0 5px redredoutlinered solid 1px}

>

="myform"οnsubmit="return checkForm();"method="post"="onelist"="UserName">手机号="UserName"="请输入手机号码"="^1[0-9]{10}$"required oninvalid="this.setCustomValidity('请输入正确的号码');"οninput="setCustomValidity('')"="Password">密码="Password"="password"="6~20位"class="^[a-zA-Z0-9]\w{5,19}$"="this.setCustomValidity('请输入正确密码');"="setCustomValidity('')"οnchange="checkPassword()"="Repassword">确认密码="Repassword"="确认密码"required onchange>了解方式="konw">==请选择==="1">搜索引擎="2">朋友圈="3">朋友推广="4">广告投放="提交"script="text/javascript">

functioncheckPassword() {varpass1=document.getElementById("Password);pass2Repassword);if(pass1.value!=pass2.value)//设置自定义验证约束提示信息

pass2.setCustomValidity(两次输入的密码不匹配elsepass2.setCustomValidity("");

}script>

默认气泡修改

event.preventDefault(); 阻止默认气泡

="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">表单验证默认样式修改.onelineline-height1.5margin10px auto.oneline labelwidth15pxfont-size14pxfont-family"Microsoft Yahei"displayinline-block.oneline .sinput60%heightborder-radius6pxborder1px solid #e2e2e2.oneline input[type="submit"]margin-left20px80pxbackground-color#5899d0color.error-messageredfont-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)"> submitButtonthesubmit);

submitButton.addEventListener(clickinValidityFieldform.querySelectorAll(:invalid),errorMessage.error-messagefori= ; i

errorMessage[i].parentNode.removeChild(errorMessage[i]);

}inValidityField.length; i) {

parentinValidityField[i].parentNode;

parent.insertAdjacentHTML(beforeend

)

}(inValidityField.length> ) {

inValidityField[].focus();

}

})

}formforms);

replaceValidationUI(form);>

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！