理解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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
js实现随机点名器精简版
Jun 29 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 post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
twig里使用js变量的方法
2016/02/05 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
浅析javascript的return语句
2015/12/15 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
js闭包用法实例详解
2016/12/13 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
python:socket传输大文件示例
2017/01/18 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python异常处理和日志处理方式
2019/12/24 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python中线程和进程有何区别
2020/06/17 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
护士长竞聘演讲稿
2014/04/30 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers