理解JavaScript表单的基础知识

HTMLFormElement继承了HTMLElement,它自己独有的属性和方法有:

  • acceptCharset:服务器能够处理的字符集,等价于HTML的accept-charset特性
  • action:接收请求的URL,等价于HTML中的action特性。
  • elements:表单中所有控件的集合(HTMLCollection)
  • enctype:请求的编码类型
  • length:表单中控件的数量
  • method:要发送的HTTP请求类型,通常是get或post
  • name:表单的名称
  • reset():将所有表单域重置为默认值
  • submit():提交表单
  • target:用于发送请求和接收响应的窗口名称;

取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值;

一、提交表单

提交表单的按钮有三种:

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件,这样就可以验证表单数据和决定是否允许提交表单,如下面的代码就可以阻止表单的提交:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

另外也可以通过js脚本调用submit()方法提交表单,在调用submit()提交表单不会触发submit事件。

var form = document.getElementById("myForm");
form.submit();

第一次提交表单后如果长时间没有回应,用户会变得不耐烦,往往多次点击提交按钮,导致重复提交表单,因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

二、重置表单

重置表单应该使用input或button:

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

当用户单击重置按钮重置表单时,会触发reset事件,可以在必要的时候取消重置操作:

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

另外也可以通过js脚本调用reset()方法重置表单,在调用reset()方法重置表单时会触发reset事件。

var form = document.getElementById("myForm");
form.reset();

三、表单字段

每个表单都有一个elements属性,该属性是表单中所有表单(字段)的集合:

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

多个表单控件使用一个name(单选按钮),那么会返回以该name命名的NodeList:

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

name都是color,在访问elements["color"]时,返回NodeList:

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

共有的表单字段属性

  • disabled: 布尔值,表示当前字段是否被禁用;
  • form: 指向当前字段所属表单的指针:只读;
  • name: 当前字段的名称;
  • readOnly: 布尔值,表示当前字段是否只读;
  • tabIndex: 表示当前字段的切换(tab)序号;
  • type: 当前字段的类型;
  • value: 当前字段被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径;

可通过submit事件在提交表单后禁用提交按钮,但不可以用onclick事件,因为onclick在不同浏览器中有“时差”;

共有表单字段方法

  • focus(): 激活字段,使其可以响应键盘事件;
  • blur(): 失去焦点,触发;使用的场合不多;

可以在侦听页面的load事件上添加该focus()方法:

window.addEventListener("load", function () {
  document.forms["myForm"].elements["lastName"].focus();
});

需要注意,第一个表单字段是input,如果其type特性为“hidden”,或者css属性的display和visibility属性隐藏了该字段,就会导致错误。

在HTML5中,表单中新增加了autofocus属性,自动把焦点移动到相应字段。

autofocus
如:

<input type="text" name="lastName" autofocus>

或者检测是否设置了该属性,没有的话再调用focus()方法:

window.addEventListener("load", function () {
  var form = document.forms["myForm"];
  if (form["lastName"].autofocus !== true) {
    form["lastName"].focus();
  };
});

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外,所有的表单字段都支持下列3个事件:

blur: 当前字段失去焦点时触发;
change:input元素和textarea元素,在它们失去焦点且value值改变时触发;select元素在其选项改变时触发(不失去焦点也会触发);
focus:当前字段获得焦点时触发;
如:

var form = document.forms["myForm"];
var firstName = form.elements["firstName"];

firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);

function handler() {
  switch (event.type) {
    case "focus":
      if (firstName.style.backgroundColor !== "red") {
        firstName.style.backgroundColor = "yellow";

      };
      break;
    case "blur":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
    case "change":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(form.userId.value=='') {                alert("请输入用户帐号!");                form.userId.focus();                return false;           }       if(fo

  • js清空form表单中的内容示例

    复制代码 代码如下: //清空form选择 function clearForm(id){ var formObj = document.getElementById(id); if(formObj == undefined){ return; } for(var i=0; i<formObj.elements.length; i++){ if(formObj.elements[i].type == "text"){ formObj.elements[i].value = &qu

  • JavaScript判断表单提交时哪个radio按钮被选中的方法

    本文实例讲述了JavaScript判断表单提交时哪个radio按钮被选中的方法.分享给大家供大家参考.具体分析如下: 这里的表单提交时通过JavaScript判断哪个radio按钮被选中了 <script type="text/javascript"> function findButton() { var myForm = document.forms.animalForm; var i; for(i=0;i<myForm.marsupial.length; i++

  • JavaScript获取表单内所有元素值的方法

    本文实例讲述了JavaScript获取表单内所有元素值的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.aspx"> First name: <input type="text" name="fname

  • JS中表单的使用小结

    1.javascript刷新页面的方法       window.location.reload(); 使用window.open()弹出的弹出窗口,刷新父窗口    window.opener.location.reload() 使用window.showDialog弹出的模式窗口    window.dialogArguments.location.reload(); 2.javascript弹出窗口的两种实现方式 ---下面给两个弹出屏幕居中窗口的例子 window.open()方式 复制

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下: <form action="input.do" name="formkk">   &

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

  • 理解JavaScript表单的基础知识

    HTMLFormElement继承了HTMLElement,它自己独有的属性和方法有: acceptCharset:服务器能够处理的字符集,等价于HTML的accept-charset特性 action:接收请求的URL,等价于HTML中的action特性. elements:表单中所有控件的集合(HTMLCollection) enctype:请求的编码类型 length:表单中控件的数量 method:要发送的HTTP请求类型,通常是get或post name:表单的名称 reset():将

  • 基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • JavaScript表单通过正则表达式验证电话号码

    JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现. 复制代码 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length<7 || str.length>18){ return false; } else{ return reg.exec(str); }

  • 详解JavaScript表单验证(E-mail 验证)

    本文为大家分享了JavaScript表单验证,被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): function validat

  • 超实用的JavaScript表单代码段

    整理了下比较实用的Javascript表单代码段,分享给大家供大家参考,具体内容如下 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ wind

  • Javascript表单验证要注意的事项

    Javascript表单编程: 一.表单元素的查找方式: 1.var oForm=document.getElementById("Form1"); 2.var oForm=document.forms[Form1]//通过name查找: 二.表单字段的共同特点: disabled:该属性用于指示一个表单控件是否可用: form属性:该属性返回包含字段的表单: blur():该方法导致表单字段失去焦点: focus():该方法导致表单字段获得焦点: blur事件:当表单字段失去焦点时,

  • JavaScript表单验证实现代码

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或

  • JavaScript表单常用验证集合

    JavaScript表单验证年龄 JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){        var mydate=new Date;        var now=mydate.getFullYear();        if (str < now-60 || str > now-18){         return false;        }        return true; } 正则

  • JavaScript表单焦点自动切换代码

    废话不多说,关键代码如下所示: ---恢复内容开始--- <html> <head> <script> window.onload=function(){ var form=document.getElementsByTagName('form')[0]; var txt=form.elements['txt1']; var txt1=form.elements['txt2']; txt.onkeyup=function(){ if(this.value.length=

随机推荐