一个检测表单数据的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 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
基于vue实现圆形菜单栏组件
Jul 05 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
js常用代码段收集
2011/10/28 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python import与from import使用及区别介绍
2018/09/06 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
五一手机促销方案
2014/03/08 职场文书
创先争优演讲稿
2014/09/15 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
导游欢送词
2015/01/31 职场文书
思想道德自我评价2015
2015/03/09 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书