ThankWsx - [翻译]表单和数据验证
{dynamictasklist:thingsToDo}{note:title="意译文章"}
以下内容意译自JavaScript高级程序设计第11章,有省略.
英文名《Professional JavaScript For Web Developers》
作者Nicholas C. Zakas
由于时间有限不可能将原著和笔者所写的内容一一区分开来,如果对内容有疑义请查阅原著
{note}
表单(以下全部用form代替),用来让用户反馈数据回服务器.
可以用<form /><input /> <select /> <textarea />这些元素
Web的发展速度很快,但是form的样式几乎没有变过,
虽然XForms的实现渐渐迫近,没有几个浏览器主动适应他,所以现在对于form主要还是用JavaScript来扩展它的内建行为
本章,主要讲解使用JavaScript来扩展通用form的行为和功能来满足用户的需求.
Form基础
一个HTML form有以下几个属性(以下用attribute)来代替
method 可以为get post 数据传送的方式
action 数据传送到的URL地址
enctype 传送数据的编码方式,默认是application/x-www-url-encoded,当传送数据为file时必须为multipart/form-data
accept 传送文件的MIME类型,方便服务器正确的处理 ??
accept-charset 服务器接受的字符集
一个 form 可以包含下面任意数量的输入元素
<input /> -主要的HTML输入元素.通过type决定该元素是哪种显示方式
"text" - 一个单行的文本
"radio" - 一个单选按钮
"checkbox" - 一个多选按钮
"file" - 一个文件选取元素
"password" - 一个密码框,与"text"类似,不过输入的字符呈"*"样
"button" - 一个按钮
"submit" - 用来提交form
"reset" - 重设form里面所有的可见元素数据为初始化值
"hidden" - 隐藏元素
"image" - 用来替代submit作提交form用
<select /> - 单选或多选列表,内含一个或多个 <option />元素
<textarea /> - 多行文本,用rows 和 cols 控制默认尺寸大小
特别的一点：为了方便手持或其他非浏览器设备显示该form,应该为每一个form内部的元素分配一个label标签，如下
<form>
<label for="username">用户名</label>
<input type="text" name="username" id="username" value="" />
注意上面代码中的 for, id用于client控制，name 用于server处理
对<form />进行脚本编程
首先有3种方式获得form对象
var oForm = document.getElementById("formid");
var oForm = document.Forms[0];
var oForm = document.Forms["formname"]
第一种方式通过form的id获取，第二种通过document对象中的forms数组，第三种通过forms数组中的名称索引。
二、三其实是一种，一般情况下form的 id 和 name 最好是一样的。
获得form内部元素
form有一个集合名字叫elements
通过oForm.elements[0]或者oForm.elements["txtname"]这两种方法可以获得form里面的一个元素
在一些浏览器版本里可以直接使用oForm.txtname来获取,是个很便捷的方式但是不推荐.
最后,值得注意的是,如果element名称含有空格,可以用oForm["txt name"]来直接调用.
当然除此之外,仍然可以用getElementById的方法来获取form成员
form内部元素的一些共有属性
disabled 用户不可以输入任何内容
form 返回该元素的form,即可以通过这个属性验证该元素是否为指定form里面的
focus 放置焦点,然后onfocus事件函数执行
blur 失去焦点,然后onblur事件函数执行
{note:title=这里面有一个特例:}
input-hidden元素仅支持form属性,其他都不支持
{note}
下面讲一些专题
form第一个元素聚焦
当页面载入的时候,往往默认焦点并不在form或者其内部的元素上.
用一种简单的方法可以实现,类似document.forms[0].elements[0].focus();
但是这种方法在某些情况下会弹出JavaScript错误,如:第一个元素是hidden或者第一个元素并不能应用focus方法,\{前面说所有元素都支持focus还有不支持的???\}
下面给出一些代码来解决这个问题,
var FormUtil = new Object; \{建立一个新的对象以便于封装\}
FormUtil.focusOnFirst = function() {
if(document.forms.length>0) {
for(var i=0;i<document.forms[0].elements.length;i++) {
var oField = document.forms[0].elements[i];
if(oField.type != "hidden") {
oField.focus();
return ;
}
}
}
}
在body载入的时候执行
<body onload='FormUtil.focusOnFirst()">
{warning:title="一些特殊情况"}
如果页面内容很多,打开很慢,在没有完全打开时,用户已经可以在某些input里面输入了，那么当页面载入后再执行聚焦至第一个元素的话会打断用户的输入,反而起到相反的效果.因此,可以在前面的代码里加上判断元素value值是否为空以及一些更人性化的思考.具体情况具体分析.
{warning}
提交form
一般情况下,有两种方法
<input type="submit" value="submit" />
<input type="image" src="someurl" />
当这两个元素中的一个被激活(鼠标点击或者用tab键使其聚焦)时,按下键盘上的Enter键就可以提交表单了.
你可以用下面的代码来测试,而不用实际传送数据到服务器端,通过放一段JavaScript代码在form的action属性里即可
<form action="JavaScript:alert('数据已提交');" >
</form>
不使用上面的方法可以使用form的submit()方法.
这样的话,必须先获取form对象(上面有提到),然后再执行.
下面是一个例子
<form action="JavaScript:alert('Submitted');">
<input type="text" name="username" value="" />
<input type="button" value="Button" onclick="this.form.submit();return false;" />
</form>
仅仅提交一次
有一个很常见的问题，当用户提交Web表单时，如果页面没有马上相应，用户就会不断地点击submit按钮。有一个非常简单的解决方法：在用户点击submit按钮后，使之不可再点。下面告诉你如何做：不要使用一个submit按钮,而使用一个普通按钮，设置按钮属性为disabled在用户点击之后。下面是代码：
<input type="button" value="Submit" onclick="this.disabled=true;this.form.submit()" />
当这个按钮被点击，设置该按钮disabled为true，然后再submit这个form(代码用this来代表该按钮,form属性来指代按钮所属的form).
这部分代码也可以放入function里面,如果你希望的话.
你也许会很想知道为什么不能使用submit按钮.答案是如果submit按钮的disabled属性被设置为true的话,实际上会阻止form的提交.\{这样说的前提是submit按钮里面只有this.disabled=true\}
表单重置resetting
如果你想提供给用户一个reset所有form元素为其默认值的方法,你可以使用一个HTML reset按钮
<input type="reset" value="Reset Values" />
与Submit按钮相似的,使用reset按钮不需要脚本支持来告诉浏览器当该按钮被点击时的行为.同样与Submit按钮类似的,当该按钮被点击时一个reset事件被激发.
<form method="post" action="javascript:alert('submitted')" onreset="alert('I am resetting')">
当然，你也可以用onreset事件处理来取消表单重设.
form也有一个reset()方法可以直接用脚本来重设表单元素:
<input type="button" value="reset" onclick="document.forms[0].reset()" />
与submit()事件不同的是,reset()方法激活reset事件和onreset事件.下面是示例代码
<form action="JavaScript:alert('submit');" onsubmit="alert('submitting')" onreset="alert('reset');">
<input type="text" value="Text" name="username" />
<input type="submit" onclick="this.disabled=true;" />
<input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();" />
<input type="reset" value="REST" />
<input type="button" value="reset" onclick="this.form.reset();" />
</form>
{warning:title="重置表单的变化"}
因为不断增加的用户误将reset按钮当成了submit按钮(主要是因为submit和reset按钮往往被放在一起).如果一个form载入时包含一些初始化信息,reset按钮往往是有用的(reset按钮就是恢复表单元素为其初始值).如果表单初始化时没有任何信息在表单元素中的话,推荐不使用reset按钮.
{warning}
Text框
HTML里有两种文本输入框:
<input type="text" /> 一个单行
<textarea />
<input />元素必须有一个设置为"text"的type_属性来显示一个文本框.你可以设置size_属性来指定文本框的宽度(可见字符)._value_属性来指定文本框的初始值,_maxlength_属性指定该文本框允许的最大长度.下面是一个简单的例子.
<input type="text" size="25" maxlength="50" value="初始化值" />
<textarea />元素是一个多行文本框.可以用rows_和cols_属性来指定相关的参数.与<input />不同的是,<textarea />的初始化值必须包含在<textarea>和</textarea>之间,如下所示
<textarea cols="5" rows="25">初始化值</textarea>
与<input />元素不同的是,<textarea>不能指定允许的最大字符长度.
回复: ThankWsx - [翻译]表单和数据验证
我的多功能在线编辑器（所见所得）让你们看看：[url]http://www.yuepin.com/tea/news/form.php[/url]回复: ThankWsx - [翻译]表单和数据验证
发个源码上来啊,兄弟,呵呵页:
[1]