一个检测表单数据的JavaScript实例


Posted in Javascript onOctober 31, 2014

一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看

<!DOCTYPE html> 
  <html> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>每天一个JavaScript实例-检测表单数据</title> 
  <style> 
    [role="alert"]{ 
      background-color: #fcc; 
      font-weight: bold; 
      padding:5px; 
      border:1px dashed #000; 
    } 
    div{ 
      margin:10px 0; 
      padding:5px; 
      width:400px; 
      background-color: #fff; 
    } 
  </style> 
   
  <script> 
  window.onload = function(){ 
    document.getElementById("thirdfield").onchange = validateField; 
    document.getElementById("firstfield").onblur = mandatoryField; 
    document.getElementById("testform").onsubmit = finalCheck; 
  } 
  function validateField(){ 
    removeAlert(); 
    if(!isNaN(parseFloat(this.value))){ 
      resetField(this); 
    }else{ 
      badField(this); 
      generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed"); 
    } 
  } 
  function removeAlert(){ 
    var msg = document.getElementById("msg"); 
    if(msg){ 
      document.body.removeChild(msg); 
    } 
  } 
  function resetField(elem){ 
    elem.parentNode.setAttribute("style","background-color:#fff"); 
    var valid = elem.getAttribute("aria-invalid"); 
    if(valid) elem.removeAttribute("aria-invalid"); 
  } 
  function badField(elem){ 
    elem.parentNode.setAttribute("style","background-color#fee"); 
    elem.setAttribute("aria-invalid","true"); 
  } 
  function generateAlert(txt){ 
    var txtNd = document.createTextNode(txt); 
    msg = document.createElement("div"); 
    msg.setAttribute("role","alert"); 
    msg.setAttribute("id","msg"); 
    msg.setAttribute("class","alert"); 
   
    msg.appendChild(txtNd); 
    document.body.appendChild(msg); 
  } 
   
  function mandatoryField(){ 
    removeAlert(); 
    if(this.value.length > 0 ){ 
      resetField(this); 
    }else{ 
      badField(this); 
      generateAlert("You must enter a value into First Field"); 
    } 
  } 
  function finalCheck(){ 
    //console.log("aaa"); 
    removeAlert(); 
   
    var fields =document.querySelectorAll('input[aria-invalid="true"]'); 
    //var fields =document.querySelectorAll("input[aria-invalid='true']");//错误!!! 
    console.log(fields); 
    if(fields.length > 0){ 
      generateAlert("You have incorrect fields entries that must be fixed before you can submit this form"); 
      return false; 
    } 
  } 
  </script> 
   
  </head> 
   
  <body> 
  <form id = "testform"> 
    <div> 
      <label for="firstfield">*first Field:</label><br /> 
      <input id="firstfield" name = "firstfield" type = "text" aria-required = "true" /> 
    </div> 
   
    <div> 
      <label for="secondfield">Second Field:</label><br /> 
      <input id="secondfield" name = "secondfield" type = "text" /> 
    </div> 
   
    <div> 
      <label for="thirdfield">Third Field(numeric):</label><br /> 
      <input id="thirdfield" name = "thirdfield" type = "text" /> 
    </div> 
   
    <div> 
      <label for="fourthfield">Fourth Field:</label><br /> 
      <input id="fourthfield" name = "fourthfield" type = "text" /> 
    </div> 
   
    <input type="submit" value = "Send Data" /> 
  </form> 
   
  </body> 
  </html>
Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js数组的操作指南
Dec 28 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 #Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 #Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 #Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 #Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 #Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 #Javascript
JsRender实用入门教程
Oct 31 #Javascript
You might like
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
用python读写excel的方法
2014/11/18 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python用requests实现http请求代码实例
2019/10/31 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python实现连连看游戏
2020/02/14 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python 解析简单的XML数据
2020/07/24 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
学年末自我鉴定
2014/01/21 职场文书
房屋转让协议书
2014/10/18 职场文书
工程项目合作意向书
2015/05/08 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python