javascript html5实现表单验证

时间：2021-05-28

表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。

下面展现浏览器自带的验证功能也可在移动端中查看：

HTML部分：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <title>html5 表单验证</title></head><body><form action="#" id="formValid" class="myform" novalidate="novalidate" onsubmit="return checkForm()"> <fieldset> <div class="form-group"> <label for="name">名称</label> <div> <input type="text" class="form-control" id="name" name="name" required/> <span class="form-error">不能为空</span> </div> </div> <div class="form-group"> <label for="email">邮箱</label> <div> <input type="email" class="form-control" id="email" name="email" required/> <span class="form-error">邮箱格式不正确</span> </div> </div> <div class="form-group"> <label>省份</label> <select name="province" class="form-control"> <option value="">请选择</option> <option value="s">四川</option> <option value="c">重庆</option> </select> </div> <input type="submit" class="btn" value="提交"/> </fieldset></form></body></html>

CSS部分：

　　 fieldset{border: 0;} .myform .form-control{ display: block; padding: 5px; width: 100% } .myform input:focus:invalid + .form-error{ display: inline; } .myform .form-error{ display: none; position: absolute; margin-top: .7em; padding: 1px 2px; color: #fff; font-size: .875rem; background: #f40; } .myform .form-error:after{ position: absolute; content: ""; top: -.5em; left: .5em; z-index: 100; display: inline-block; width: 0; height: 0; vertical-align: middle; border-bottom: .5em solid #f40; border-right: .5em solid transparent; border-left: .5em solid transparent; border-top: 0 dotted; transform: rotate(360deg); overflow: hidden; } .btn{ padding: 5px 20px; }

JavaScript部分：

function checkForm(){ var myform = document.getElementById("formValid"); return check(myform.elements); } function check(eles){ var ele; for(var i = 0;i<eles.length;i++){ ele = eles[i]; if(ele.nodeName == "SELECT"){ if(!ele.selectedIndex){ alert("请选择省份"); return false; } }else if(ele.name){ if(!ele.checkValidity()){ ele.focus(); return false; } } } return true; }

以上就是javascript结合html5实现表单验证的全部代码，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章