资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/高程3总结#第14章表单脚本

高程3总结#第14章表单脚本

Tony / 1335人阅读

表单脚本 表单的基础知识

HTMLFormElement有自己独特的属性和方法

acceptCharset，服务器能够处理的字符集，等价于HTML中的accept-charset特性

action，接受请求的URL，等价于HTML中的action特性

elements，表单中所有控件的集合

enctype，请求的编码类型，等价于HTML中的enctype特性

length，表单中控件的数量

method，要发送的HTTP请求类型，通常是"get"或"post"，等价于HTML的method特性

name，表单的名称，等价于HTML的name特性

reset()，将所有表单域重置为默认值

submit()，提交表单

target()，用于发送请求和接收响应的窗口名称，等级与HTML的target特性

提交表单

用户单击提交按钮或者图像按钮时，就会提交表单，使用或

阻止表单提交代码

var form=document.getElelemtById("myForm");
EventUtil.addHandler(form,"submit",function(event){
  //取得事件对象
  event=EventUtil.getEvent(event);
  //阻止默认事件
  EventUtil.preventDefault(event);
})

以编程方式提交表单，不会触发submit事件，因此调用方法之前要先验证表单数据

var form=document.getElementById("muForm");
//提交表单
form.submit();

提交表单时，可能出现最大的问题就是重复提交表单，在第一次提交表单之后，如果长时间没有反应，用户可能会反复单击提交按钮。解决办法两个，第一次提交之后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作

重置表单

在用户单击重置按钮时，表单会被重置，使用type特性值为reset的或

阻止重置表单的代码

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
  //取得事件对象
  event = EventUtil.getEvent(event);
  //阻止表单重置
  EventUtil.preventDefault(event);
});

可以通过JavaScript来重置表单

var form=document.getElementById("myForm");
//重置表单
form.reset();

与调用submit()方法不同，调用submit方法会像单击按钮一样触发reset事件

表单字段

表单字段公有的属性

disabled，布尔值，表示当前字段是否被禁用

form，指向当前字段所属表单的指针。只读

name，当前字段的名称

readOnly，布尔值，表示当前字段是否只读

tabIndex，表示当前字段的切换序号

type，当前字段类型，如CheckBox

value当前字段将被提交给服务器的值

公有的表单字段方法

每个表单都有两个方法，focus()和blur()，其中focus()方法用于将浏览器的焦点设置到表单字段，即激活字段，使其可以响应键盘事件。在调用blur方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上移走

公有的表单字段事件

blur，当前字段失去焦点时触发

change，对于input和textarea元素，在失去焦点且value值改变时触发，对于select元素，在选择选项时触发

focus，当前字段获得焦点时触发

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.style.backgroundColor != "red"){
    target.style.backgroundColor = "yellow";
  }
});
EventUtil.addHandler(textbox, "blur", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
});
EventUtil.addHandler(textbox, "change", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
})

文本框脚本

两种方式来表示文本框，input和textarea

选择文本

两种文本框都支持select()方法，与select()方法对应的是一个select事件，选择文本框中的文本时，就会触发select事件

添加两个属性：selectionStart和selectionEnd，保存的是基于0的数值，表示选择文本的范围

所有文本框都有一个setSelectionRange()方法，接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

textbox.value = "Hello world!"
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"

过滤输入

剪切板事件

beforecopy，在发生复制操作前触发

copy，在发生复制操作时触发

beforecut，在发生剪切操作前触发

cut，在发生剪切操作时触发

beforepaste，在发生粘贴操作前触发

paste，在发生粘贴操作时触发

自动切换焦点 
(function(){
function tabForward(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.value.length == target.maxLength){
    var form = target.form;
    for (var i=0, len=form.elements.length; i < len; i++) {
      if (form.elements[i] == target) {
        if (form.elements[i+1]){
          form.elements[i+1].focus();
        }
        return;
      }
    }
  }
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
HTML5约束验证API

必填字段

指定required属性

其他输入类型

新增email和url等类型

数值范围

number，range，datetime，datetime-local，date，mouth，week，time等

输入模式

pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值

检测有效性

checkValidty()方法，检测表单汇总某个字段是否有效，所有表单字段都有这个方法，如果字段有效，返回true，反之返回false

if (document.forms[0].elements[0].checkValidity()){
//字段有效，继续
} else {
//字段无效
}

customError，如果设置了setCustomValidity，则为true，否则为false

patternMismatch，如果值与指定的pattern属性不匹配，返回true

rangeOverflow，如果值比max值大，返回true

rangeUnderflow，如果值比min值小，返回true

stepMisMatch，如果max和min之间的步长值不合适，返回true

tooLong，如果值的长度超过了maxlength属性指定的长度，返回true

typeMismatch，如果值不是mail或url返回的格式，返回true

valid，如果这里的属性都是false，返回true

valueMissing，如果标注为required的字段中灭有值，返回true

通过设置novalidate属性，可以告诉表单不进行验证

选择框脚本

HTMLSelectElement类型提供的属性和方法

add(newOption, relOption)，向控件中插入新

multiple，布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。

options，控件中所有

remove(index)，移除给定位置的选项。

selectedIndex，基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。

size，选择框中可见的行数；等价于 HTML 中的 size 特性

选择框的value属性由当前选中项决定，相应规则

如果没有选中的项，则选择框的 value 属性保存空字符串。

如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。

如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。

如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。

为了便于访问数据，HTMLOptionElement对象添加下列属性

index，当前选项在option集合中的索引

label，当前选项的标签，等价于HTML中的label特性

selected，布尔值，表示当前选项是否被选中，将这个属性设置为true可以选中当前选项

text，选项的文本

value，选项的值，等价于HTML中的value特性

选择选项

对于只允许选择一项的选择框，访问选中项的最简单方式就是使用选择框的selectedIndex属性

var selectedOption=selectbox.opitons[selectbox,selectedIndex]

添加选项

添加选项的方式有很多，第一种方式就是使用如下所示的DOM方法

var newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

第二种方式是使用Option构造函数来创建新选项

var newOption=new Option("Option text","Option value");
selectbox.appendChild(newOption);//在IE8及之前版本中有问题

第三种添加新选项的方式是使用选择框的add()方法

var newOption=new Option("Option text","Option value");
selectbox.add(newOption,undefined);//最佳方案

移除选项

removeChild()方法，移除选项

selectbox.removeChild(selectbox.options[0]);//移除第一个选项

remove()方法，移除选项

selectbox.remove(0);//移除第一个选项

将相应的选项设置为null，移除选项

selectbox.options[0]=null;//移除第一个选项

表单序列化

浏览器将数据发送给服务器

对表单字段的名称和值进行URL编码，使用&符分隔

不发送禁用的表单字段

只发送勾选的复选框和单选按钮

不发送type为"reset"和"button"的按钮

多选选择框中的每个选中的值多带带一个条目

在单击提交按钮提交表单的情况下，也会发送提交按钮，否则不发送提交按钮，也包括type为"image"的元素