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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 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 高手之路(三)
2006/10/09 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
jQuery操作cookie
2016/08/08 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python操作日期和时间的方法
2014/03/11 Python
python 调用c语言函数的方法
2017/09/29 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python  logging日志打印过程解析
2019/10/22 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
影视制作岗位职责
2013/12/04 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android