表单一

• 表单的基础知识

表单是有<form>元素来表示的，在js中，表单对应的是HTMLFormElement类型，它继承了HMLElement，因此与其他HTML元素具有相同的默认属性，它也有自己的属性方法：

1. acceptCharset：服务器能够处理的字符集，等价于HTML中的accep-charset特性。
2. action：接受请求的url。
3. elements：表单中所有控件的集合。
4. enctype：请求的编码类型。
5. length：表单中控件的数量。
6. method：要发送的HTTP请求类型，通常是get或post
7. name：表单的名称；
8. reset()：将所有表单域重置为默认值。
9. submit()：提交表单。
10. target：用于发送请求和接收响应的窗口名称。

取得form元素引用的方式有好几种：

var form=document.getElementById(“form1”);

var firstForm=document.forms[0];

var myForm=document.forms[“form2”];

另外，在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了name特性的表单作为属性保存在document对象中，例如document.form2可以访问名为form2的表单，不过我们补推荐使用这种方式：一是容易出错，二是将来的浏览器可能不支持。

• 提交表单

我们单击一下代码生成的按钮，都可以提交表单：

<input type=”submit” value=”Submit Form”>

<button type=”submit”>Submit Form</button>
<input type=”image” src=”graphic.gif”>

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车就可以提交表单，如果表单里面没有提交按钮，按回车键不会提交表单。

阻止这个事件的默认行为就可以取消表单提交。

在调用submit()方法的形式提交表单时，不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。

• 重置表单

使用type特性值为reset的input或者button都可以创建重置按钮

<input type=”resst” value=”Reset Form”>

 

<button type=”reset”>Reset Form</button>

这两个按钮都可以用来重置表单，在重置表单时，所有表单字段都会恢复到页面的刚加载完毕时的初始值。

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

• 表单字段

每个表单都有elements属性，该属性是表单中所有元素的集合，这个elements集合是一个有序列表，其中包含着表单的所有字段，可以按照位置和name特性来访问它们。下面看看这个例子：

var form=document.getElementById(“form1”);

var field1=form.elements[0];

var field2=form.elements[“textbox1”];

var fieldCount=form.elements.length;

如果有多个表单控件都在使用一个name，那么就会返回以该name命名的一个NodeList例如：

 <form method=”post” id=”myForm”>

<ul>

 <li><input type=”radio” name=”color” value=”red”>Red</li>

 <li><input type=”radio” name=”color” value=”red”>Green</li>

 <li><input type=”radio” name=”color” value=”blue”>Blue</li>

</ul>

</form>

 

在这个HTML表单中，有3个单选按钮，在用elements[“color”]时，就会返回一个NodeList，看下面例子：

var form=document.getElementById(“myForm”);

var colorFields=form.elements[“color”];

alert(colorFields.length);

 

var firstColorField=colorFields[0];

var firstFormField=form.elements[0];

alert(firstColorField === firstFormField);

• 共有的表单字段属性

处理fieldst元素外，所有表单字段都有相同的一组属性，表单字段共有的属性和方法如下：

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

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

name：当前字段的名称。

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

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

type：当前字段的类型

value：当前字段将被提交到服务器的值。

• 共有的表单字段事件

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

blur：当前字段失去焦点触发。

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

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

• 选择文本事件

在选择文本框中的文本时，就会触发select事件。

• 取得选择的文本

HTML5添加了两个属性：selectionStart和selecttionEnd，这两个属性中保存的是基于0的数值，表示所选择文本的范围。要取得用户在文本框中选择的文本，可以使用如下代码：

function getSelectedText(restbox){

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

}

•  选择部分文本

Html5 添加了 setSelectionRange方法，这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

textbox.value=”Hello world!”;

textbox.setSelectionRange(0,textbox.value.length);//”Hello world!”

textbox.setSelectionRange(0,3);//”Hel”

textbox.setSelectionRange(4,7);

• 过滤输入

屏蔽字符：有时候需要用户输入的文本中包含或不包含某些字符，通过阻止keypress事件的默认行为来屏蔽此字符串。

• 自动切换焦点

(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(“textTel1”);

var textbox2=document.getElementById(“textTel2”);

var textbox3=document.getElementById(“textTel3”);

EventUtil.addHandler(textbox1,”keyup”,tabForward);

EventUtil.addHandler(textbox2,”keyup”,tabForward);

EventUtil.addHandler(textbox3,”keyup”,tabForward);

});

• HTML5约束验证API

1. 必填字段：

在表单字段中指定了required属性，

<input type=”text” name=”username” required>

• 其他输入类型

Email和url是两个得到支持最多的类型。

•  检测有效性

使用checkValidity()方法可以检测表单的某个字段是否有效，所有表单字段都有这个方法，这个方法返回true或false，要检测整个表单是否有效，可以在表单自身调用checkValidity()方法，如果所有表单字段都有效，这个方法返回true，其中一个无效返回false。

 If(document.forms[0].checkValidity()){

 

}else{

 

}

 

validity属性：

customError ：如果设置了setCustomValidity()，则为true，否则false。

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

rangeOverflow：如果值比max值达，返回true。

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

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

tooLong：如果值得长度超过了maxlength属性指定的长度，返回true，有的浏览器会自动约束字符数量，因此这个值可能永远都返回false。

typemismatch：如果值不是”mail”或”url”要去的格式，返回true。

valid：如果这里的其他属性都是false，返回true，checkValidity()也要求相同的值

•  禁用验证

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

<form method=”post” action=”signup.php” novalidate>

</form>

在JavaScript中使用noValidate属性可以取得或设置这个值，如果这个属性存在为true，如果不存在为false。

如果一个表单中多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性

<form method=”post” action=”foo.php”>

<input type=”submit” value=”Regular Submit”>

   <input type=”submit” formnolidate name=”btnNoValidate” value=”Non-validating Submit>

</form>

• 选择框脚本

属性：

add()：向控件中插入新option元素，位置在相关项之前。

multiple:布尔值，表示是否允许多项选择。

• options：控件中所有的option元素的HTMLCollection。

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

selectedIndex：基于0的选中项的索引。 选中为-1。