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 ></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
@H_555_403@
>纯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"] 150pxselect:required,input:required,textarea:required background #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% center Box-shadow 0 0 5px #5cd053 border-color #28921fselect: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); >总结
以上是内存溢出为你收集整理的HTML5表单验证（4个实用的表单美化案例）全部内容，希望文章能够帮你解决HTML5表单验证（4个实用的表单美化案例）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）