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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
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 Smarty模板生成html文档的方法
2010/04/12 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
学生信息管理系统python版
2018/10/17 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
《哪吒闹海》教学反思
2014/02/28 职场文书
房屋转让协议书范本
2014/04/11 职场文书
庆国庆活动总结
2014/08/28 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android