理解JavaScript表单的基础知识


Posted in Javascript onJanuary 25, 2016

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;
  }
}

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

Javascript 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 #Javascript
You might like
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
详解如何运行vue项目
2019/04/15 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python实现一组典型数据格式转换
2018/12/15 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
在线服装零售商:SheIn
2016/07/22 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
文明学生标兵事迹
2014/01/21 职场文书
挂职自我鉴定
2014/02/26 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
狮子林导游词
2015/02/03 职场文书
职称评定个人总结
2015/03/05 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书
家长通知书家长意见
2015/06/03 职场文书