Home > Article > Web Front-end > javascript html5实现表单验证_javascript技巧
表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。
下面展现浏览器自带的验证功能也可在移动端中查看：
HTML部分：
html5 表单验证
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
以上就是javascript结合html5实现表单验证的全部代码，希望对大家的学习有所帮助。