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 相关文章推荐
Mac地址验证的javascript代码
Nov 09 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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中filter_input函数用法分析
2014/11/15 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
redux-saga 初识和使用
2018/03/10 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python基于当前时间批量创建文件
2020/05/07 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
酒店七夕情人节活动策划方案
2014/08/24 职场文书
读群众路线的心得体会
2014/09/03 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL