javascript 表单脚本详解

表单的基础知识

在HTML中，表单是由<form>元素来组成的。在js中，表单对应的则是HTMLFormElement类型。它和其他HTML元素一样具有相同的默认属性。下面是HTMLFormElement独有的属性和方法：

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

action：接收请求的URL，等价于HTML中的action特性。

elements：表单中所有控件的集合（HTMLCollection）

enctype：请求的编码类型

length：表单中控件的数量

method:要发送的HTTP请求类型，通常是get或post

name：表单的名称

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

submit():提交表单

获取表单引用的推荐方式

1.通过id属性过的

2.通过document.forms获取，在用name索引

提交表单的方式

1.用submit提交按钮提交

2.from.submit()提交，不会验证数据

3.ajax方式提交

重置表单

1.使用重置按钮reset

2.form.reset()

3.自定义的清空表单方式

表单字段

每个表单都有elements属性，该属性是表单中所有元素的集合。这个集合是一个有序表，其中包含着表单中的所有字段。下面是共有的表单字段属性：

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

form:指向当前字段所属表单的指针：只读

name:当前字段的名称

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

tabIndex:表示当前字段的切换（tab）序号

type:当前字段的类型

value:当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

致谢属性除了form意外，其他的字段都可以使用js动态修改。

共有的表单字段方法

focus():激活字段，使其可以响应键盘事件

blur():失去焦点，触发

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

共有的表单字段事件

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

blur，change，focus

文本框脚本

在HTML中，有两种方式来表现文本框：一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。使用input方式，必须添加type，设置为“text”。通过设置size特性，可以指定文本框内能够显示的字符数。value属性可以设置文本框的初始值。maxlength特性则是用于指定文本框内可以接受的最大字符数。<textarea>可以指定cols和rows，确定大小。

上述两种文本框都支持select()方法，这个方法主要用于选择文本框中的所有文本。不接受任何参数。与这个方法对应的select事件，在选择了文本框中的文本时事件触发。

在获取文本内容上，可以使用以下代码获取：

textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

选择部分文本的方法是setSelectionRange()方法。接收两个参数：要选择第一个字符的索引和最后一个字符的索引。要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题。

操作剪贴板

以下是6个剪贴板事件

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

copy：在发生复制时触发

beforecut：在发生剪贴前操作

cut：在发生加贴时操作

beforepaste：在发生黏贴操作前触发

paste：在发生黏贴操作时触发

要访问剪贴板中的数据，可以使用clipboardData对象，在IE中，这个对象是window对象的属性，在friefox，safari和chrome，这个对象是相应event对象的属性。这个clipboardData对象有三个方法：getData(),setData(),clearData()。它接收一个参数，即要取得数据的格式。IE中：有两种数据格式，“text”,"URL".在friefox，safari和chrome中，这个参数是一种MIME类型，不过可以用“text”代表“text/plain”.下面是获取剪贴板数据的方法：

getClipboardText:function(event){

   var clipboardData=(event.clipboardData||window.clipboardData);

   return clipboardData.getData("text");

}

setClipboardText:function(event,value){

   if(event.clipboardData){

   return event.clipboardData.setData("text/plain",value);

   }else if(window.clipboardData){

   return window.clipboardData.setData("text",value);    

   }

}

将这两个方法放到EventUtil对象中。

另外，考虑易用性，可以使用自动换焦的方式来处理文本输入。

HTML5约束验证API
下面的功能只有支持HTML5的浏览器才会支持。

1.必填约束字段

在必填字段中添加属性required。它适用于<input>,<textarea>,<select>字段。

使用下面的代码可以检测浏览器是否支持required属性：

var isRequiredSupported="required" in document.createElement("input");

2.其他输入类型

为type增加了几个值，这些值能反映数据类型的信息，而且还能提供一些默认的验证。其中，“email”和“url”是两个得到支持最多的类型，各浏览器也都为它们增加了定制的验证机制。

var isEamilSupported=(document.createElement("input").type=="email");

3.数值范围

除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。对这事数值类型的输入元素可以指定min属性，max属性，step属性。同时这些数值类型元素还有两个方法：stepUp(),stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。

4.输入模式

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

可以使用以下代码来检测浏览器是否支持pattern属性：

var isPatternSupported="pattern" in document.createElement("input");

5检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。

input的validity属性会给出什么字段有效和无效的具体信息。

6.禁用验证

通过设置表单的novalidate属性，可以是表单不进行验证。用js获取form之后，设置它的novalidate属性为true，会禁用表单验证。

选择框文本

选择框通过<select>和<option>元素创建的。除了共有的属性和方法外，下面的是特有的属性和方法：

add(newOption,relativeOption):向控件中插入新<option>元素，其位置相关项relativeOption之前

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

options:控件中所有<option>元素的HTMLCollection

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

selectedIndex:基于0的选中项的索引，如果没有选中项的索引，则值为“-1”。

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

在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示。为了便于访问，HTMLOptionElement对象添加了下列属性：

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

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

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

text：选项的文本

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

注意：选择框的change事件与其他表单字段的change事件触发的条件不一样，其他表单字段的change事件是在值被修改且焦点离开当前字段时触发而选择框的change事件只要选中了选项就会触发。

添加选项的方法

1.创建option的节点，添加option的属性，将节点添加到select节点下

2.直接添加属性方式创建节点

3.用add方式添加节点

移动和重排都要改变option元素的index。

表单序列化

表单序列化的准则：

1：对表单字段的名称和值进行URL编码，使用和号（&）分隔

2：不发送禁用的表单字段

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

4：不发送type为“reset”和“button”的按钮

5：多选框中每个选中的值单独一个条目

6：在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。也包括type为“image”的input元素

7：<select>元素的值，就是选中的<option>元素的value特性值

在表单序列化过程中，一般不包含任何按钮手段，因为结果字符串可能是通过其他方式提交的。除此之外的其他上述规则应该遵循，以下是实现表单序列化的代码：

function serialize(form){

  var parts=[],field=null,i,len,j,optLen,option,optionValue;

  for(i=0,len=form.elements.length;i<len;i++){

    field=form.elements[i];

switch(field.type){

  case "select-one":

  case "select-multiple":

         if(field.name.length){

for(j=0,optLen=field.options.length;j<optLen;j++){

option=field.options[j];

if(option.selected){

  optValue="";

  if(option.hasAttribute){

 optValue=(option.hasAttribute("value")?option.value:option.text);  

  }else{

 optValue=(option.attributes["value"].specified?option.value:option.text);  

  }

  parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));

}

}  

 }

 break;

   case undefined:

   case "file":

   case "submit":

   case "reset":

   case  "button":

         break;

   case "radio":

   case "checkbox":  if(!field.checked){break;}

   default: if(field.name.length){

         parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));

   }

}

  }

  return parts.join("&");

}

富文本编辑

富文本编辑又称WYSISWG（所见即所得）。这一项技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>的HTML代码。designMode属性有两个可能的值：“off”默认值和“on”。在设置为“on”时，整个文档变得可编辑，然后就可以像使用文字处理软件一样。

使用contentededitable属性

把它应用到给页面中的任何元素，然后用户可以立即编辑该元素，不需要iframe，空白页和js，只要为元素设置contentededitable属性即可。

它的属性值有3个，true表示打开，false表示关闭，inhert表示从父元素那里继承。

操作富文本

与富文本编辑交互的方式，就是使用document.execCommand()。这个方法可以对文档执行预定义的命令，而且可以应用大多数格式。可以为document.execCommand()方法传递3个参数：要执行的命令名称，表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（不需要值，可设为null）。为了保证浏览器兼容，需要设置第二个参数为false。

除了命令之外，还有一些与命令相关的方法。第一个方法是queryCommandEnabled(),可以检验是否可以针对当前选择的文本或者当前插入字符处所在的位置执行相应的命令。这个方法接收一个参数：即要检测的命令。如果允许返回true。

queryCommandState()方法用来确定是否已将指定的命令应用到了选择的文本。

queryCommandValue()方法用于取得执行命令时传入的值。

富文本选区

在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。这个方法是window对象和document对象的属性，调用它返回一个表示当前选择文本的selection对象。

当富文本中存在表单时，表单是不能提交的，只能使用代码进行提交。