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停止输出代码
Jul 20 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
浅析node.js中close事件
2014/11/26 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
python返回昨天日期的方法
2015/05/13 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
三下乡个人总结
2015/03/04 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书