HTML5表单验证(4个实用的表单美化案例)
程序员文章站
2022-06-23 22:32:30
multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证
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记忆内容
<input type="text" list="tips"> <datalist id="tips"> <option value="erwerewr"></option> <option value="erwerew2r"></option> <option value="erwerew2r"></option> <option value="erwerewr"></option> </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="请输入代码"> ----------------------- function checkit(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
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> .container{ max-width:400px; margin:20px auto; } 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; } </style> </head> <body> <!-- <div class="contenteditable"></div> --> <div class="container"> <form action="#"> <input type="name" required><label>名称</label> <input type="email" required><label>邮箱</label> <input type="tel"><label>手机</label> <input type="url"><label>网址</label> <select name="" id=""> <option value="">非必选项一</option> <option value="">非必选项二</option> <option value="">非必选项三</option> <option value="">非必选项四</option> </select> <textarea name="#" cols="30" rows="10" placeholder="留言(必填)" required></textarea> <input type="submit" value="提交表单"> </form> </div> </body> </html>
:valid
:invalid
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>纯css表单验证美化(invalid和valid)应用案例</title> <style> .container{ margin:100px; position:relative; } input{ border: 1px solid #999; outline:0; width:140px; height:30px; line-height:30px;text-indent:36px;transition: all .3s; border-radius:5px; } span.title{ position:absolute; line-height:30px; height: 30px; left:2px; top:2px; transition:all .3s; } input:focus,input:hover{ text-indent:2px; } input:focus+span.title,input:hover+span.title{ transform:translatex(-120%) } input:valid ~label::after{ content: "你输入正确!" } input:invalid ~label::after{ content: "你邮箱错误!" } input:valid{ border:1px solid green; } input:invalid{ border:1px solid red; } </style> </head> <body> <div class="container"> <input id="mail" type="email" required placeholder="输入邮箱"> <span class="title">邮箱</span> <label for="mail"></label> </div> </body> </html>
oninvalid
oninput
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>html5表单美化综合案例</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> </head> <style> .onelist { margin: 10px 0 5px 12px; } .onelist label { width: 80px; display: inline-block } .onelist input, .onelist select { height: 25px; line-height: 25px; width: 220px; border-radius: 3px; border: 1px solid #e2e2e2; } .onelist input[type="submit"] { width: 150px; height: 30px; line-height: 30px; } 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 { background: #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 { background: #fff url(../img/error.png) no-repeat 99% center; box-shadow: 0 0 5px red; border-color: red; outline: red solid 1px; } </style> <body> <form class="myform" onsubmit="return checkform();" method="post"> <div class="onelist"> <label for="username">手机号</label> <input name="username" id="username" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" required oninvalid="this.setcustomvalidity('请输入正确的号码');" oninput="setcustomvalidity('')"> </div> <div class="onelist"> <label for="password">密码</label> <input name="password" id="password" type="password" placeholder="6~20位" class="" pattern="^[a-za-z0-9]\w{5,19}$" required oninvalid="this.setcustomvalidity('请输入正确密码');" oninput="setcustomvalidity('')" onchange="checkpassword()"> </div> <div class="onelist"> <label for="repassword">确认密码</label> <input name="repassword" id="repassword" type="password" placeholder="确认密码" class="" required onchange="checkpassword()"> </div> <div class="onelist"> <label for="repassword">了解方式</label> <select name="konw" required> <option value="">==请选择==</option> <option value="1">搜索引擎</option> <option value="2">朋友圈</option> <option value="3">朋友推广</option> <option value="4">广告投放</option> </select> </div> <div class="onelist"> <input type="submit" value="提交"> </div> </form> <script type="text/javascript"> function checkpassword() { var pass1 = document.getelementbyid("password"); var pass2 = document.getelementbyid("repassword"); if (pass1.value != pass2.value) // 设置自定义验证约束提示信息 pass2.setcustomvalidity("两次输入的密码不匹配"); else pass2.setcustomvalidity(""); } </script> </body> </html>
默认气泡修改
event.preventdefault(); 阻止默认气泡
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>表单验证默认样式修改</title> </head> <style> .oneline{line-height: 1.5;margin:10px auto;} .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "microsoft yahei";display: inline-block;} .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;} .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;} .error-message{color:red; font-size:12px;text-indent:108px;} </style> <body> <form id="forms"> <div class="oneline"> <label for="name">用户名:</label> <input id="name" name="name" class="sinput" required> </div> <div class="oneline"> <label for="email">email:</label> <input id="email" name="email" class="sinput" type="email" required> </div> <div class="oneline"> <input type="submit" value="提交" id="thesubmit"> </div> </form> <script> function replacevalidationui(form) { form.addeventlistener("invalid", function(event) { event.preventdefault(); }, true); form.addeventlistener("submit", function(event) { if (!this.checkvalidity()) { event.preventdefault(); } }, true); var submitbutton = document.getelementbyid("thesubmit"); submitbutton.addeventlistener("click", function(event) { var invalidityfield = form.queryselectorall(":invalid"), errormessage = form.queryselectorall(".error-message"), parent; for (var i = 0; i < errormessage.length; i++) { errormessage[i].parentnode.removechild(errormessage[i]); } for (var i = 0; i < invalidityfield.length; i++) { parent = invalidityfield[i].parentnode; parent.insertadjacenthtml("beforeend", "<div class='error-message'>" + invalidityfield[i].validationmessage + "</div>") } if (invalidityfield.length > 0) { invalidityfield[0].focus(); } }) } var form = document.getelementbyid("forms"); replacevalidationui(form); </script> </body> </html>