一个检测表单数据的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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
js实现查询商品案例
Jul 22 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php的debug相关函数用法示例
2016/07/11 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
js如何验证密码强度
2020/03/18 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python 容器总结整理
2017/04/04 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python笔记之facade模式
2019/11/20 Python
python绘制雪景图
2019/12/16 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python 星号(*)的多种用途
2020/09/21 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
简单的辞职信范文
2014/01/18 职场文书
研修第一天随笔感言
2014/02/15 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
单位婚育证明范本
2014/11/21 职场文书
小升初自荐信范文
2015/03/05 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫