这篇文章主要为大家详细介绍了 javascript html5 实现表单验证的具体代码,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化。
下面展现浏览器自带的验证功能也可在移动端中查看:
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;
- }
来源: http://www.phperz.com/article/17/0224/266884.html