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

一个检测表单数据的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>
赞 (0)

相关推荐

  • 利用JS轻松实现获取表单数据

    利用JS轻松实现获取表单数据

    接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站,不用ng一类的MVVM框架,只引用了Jquery,那么在处理表单的时候该怎么做呢. 一. 原始做法 <div id="form"> <select id='select1'> <option value="">--请选择--<

  • JSP 重置按钮清空传入的表单数据实例

    参考: jquery 表单 清空 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 这个js是可以实现清空表单中填写及传入的值的,但要注意: 1.jq实现,此<input />不能放在form表单内!: 2.直接写在onclick属性中即可

  • javascript检查表单数据是否改变的方法

    有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧,其中如果修改了表单的内容则返回true,没修改表单的内容则返回false.代码如下: 复制代码 代码如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox&

  • js检测离开或刷新页面时表单数据是否更改的方法

    本文实例讲述了js检测离开或刷新页面时表单数据是否更改的方法.分享给大家供大家参考,具体如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox" || type == "radio") { if (

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • javascript定时保存表单数据的代码

    (忘记是不是两家邮箱都有这个功能). 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据.但是,这个却有个缺点:那就是刷新页面后,数据将会丢失. 而此时,就该轮到我们很少关注,而且估计有不少人不知道的UserData 行为(userData Behavior)登场了: 而这个UserData是什么?怎么用?,我将在文章最后转载一篇介绍它的文章. 现在,我直接上例子,所谓无代码,无真相嘛: 复制代码 代码如下: <!DOCTYPE html PUBLIC

  • js下利用userData实现客户端保存表单数据

    事实上,我们可以利用微软DHTML默认行为中的userData行为来实现这个功能. 因为很多网友问到这样的问题,整理了一下,并提供了三个示例.下面将就该行为的使用做一个介绍: UserData 行为(userData Behavior): 1.说明: userData行为通过将数据写入一个UserData存储区(UserData store)来保存数据,userData可以将数据以XML格式保存在客户端计算机上,如果你用的是 Windows 2000 或者 Windows XP,是保存在C:\D

  • 深入分析JSON编码格式提交表单数据

    以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码. 如何声明以JSON格式提交表单 大家应该对如何用表单上传一个文件的写法很熟悉,它需要在HTML中form标记上添加 enctype="mult

  • js清空表单数据的两种方式(遍历+reset)

    方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.elements.length; i++) { if (objId.elements[i].type == "text") { objId.elements[

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

    一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role

  • 一个即时表单验证的javascript代码

    可爱吧--教你做可爱女人--化妆 美容 美化 瘦身 护肤--深圳可爱吧 // 此脚本由刘海民编写 // 网站:http://www.szrgb.net // 邮箱:lovelium@gmail.com var num=5; var mon1=0; var mon2=0; var mon3=0; var mon4=0; var mon5=0; //封装得到对像ID涵数 function getObj(objName){return(document.getElementById(objName))

  • Codeigniter检测表单post数据的方法

    本文实例讲述了Codeigniter检测表单post数据的方法.分享给大家供大家参考.具体如下: $name = $this->input->post(' name' ) ; $email = $this- >input->post( ' email' ) ; $subj ect = $this->input->post( ' subject' ) ; $message = $this->input->post( ' message' ) ; if(empt

  • 封装好的一个万能检测表单的方法

    检测表单中的不能为空(.notnull)的验证  作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断  用法:在form标签下 找到当前 表单的容器 给予class="form",当前表单的提交按钮给予 class="check"  需要验证为空的元素给予class="notnull" nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="n

  • Javascript 详解封装from表单数据为json串进行ajax提交

    摘要: js封装from表单数据为json串进行ajax提交 json封装代码 function getFormJson(frm) { //frm:form表单的id var o = {}; var a = $("#"+frm).serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [ o[this.name]

  • ThinkPHP表单自动提交验证实例教程

    本文以实例讲述了ThinkPHP表单自动提交验证的实现过程,详细步骤如下所示: 一.模板部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITL

  • laravel5表单唯一验证的实例代码

    记录一下关于laravel5的unique验证: 1.路由: Route::resource('/users', 'UsersController'); 2.Request: public function rules() { return [ 'email' => 'required|unique:users,email,' . $this->route('user')->id, 'username' => 'required', ]; } 3.控制器 public functi

  • JS模拟并美化的表单控件完整实例

    JS模拟并美化的表单控件完整实例

    本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • 四、处理表单数据

    4.1 表单数据概述 如果你曾经使用过Web搜索引擎,或者浏览过在线书店.股票价格.机票信息,或许会留意到一些古怪的URL,比如"http://host/path?user=Marty+Hall&origin=bwi&dest=lax".这个URL中位于问号后面的部分,即"user=Marty+Hall&origin=bwi&dest=lax",就是表单数据,这是将Web页面数据发送给服务器程序的最常用方法.对于GET请求,表单数据附

随机推荐