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 引起的安全问题
Dec 27 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
JS面向对象之单选框实现
Jan 17 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
js实现三角形粒子运动
Sep 22 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 字符串操作入门教程
2006/12/06 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
QQ登录简单实现代码
2021/03/09 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
javascript实现文件拖拽事件
2018/03/29 Javascript
React 组件间的通信示例
2018/06/14 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
解决Python传递中文参数的问题
2015/08/04 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
同学聚会欢迎辞
2014/01/14 职场文书
网络技术专业求职信
2014/07/13 职场文书
学生自我评语
2015/01/04 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Java Spring读取和存储详细操作
2022/08/05 Java/Android