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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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
改进的IP计数器
2006/10/09 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python实现八大排序算法
2016/08/13 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
虚拟机下载python是否需要联网
2020/07/27 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
医学生自荐信
2013/12/03 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
防沙治沙典型材料
2014/05/07 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
音乐学专业求职信
2014/07/22 职场文书
技术经济专业求职信
2014/09/03 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2014年妇联工作总结
2014/11/21 职场文书
导游词之上海豫园
2019/10/24 职场文书