表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化。
下面展现浏览器自带的验证功能也可在移动端中查看:
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实现表单验证的全部代码,希望对大家的学习有所帮助。
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理