javascript html5实现表单验证


Posted in Javascript onMarch 01, 2016

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

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

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

Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
javascript中FOREACH数组方法使用示例
Mar 01 #Javascript
JS实现Select的option上下移动的方法
Mar 01 #Javascript
angular2使用简单介绍
Mar 01 #Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 #Javascript
Bootstrap每天必学之导航条(二)
Mar 01 #Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 #Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
You might like
php获取文件内容最后一行示例
2014/01/09 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
vue实现登录功能
2020/12/31 Vue.js
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
创业计划书撰写原则
2014/01/25 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
保护环境的建议书
2014/03/12 职场文书
初中团委工作总结
2015/08/13 职场文书