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

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

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

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实现表单验证的全部代码，希望对大家的学习有所帮助。