认识Dojo中的表单：Form

子衿青青

浏览: 110912 次
性别:
来自: 深圳

最近访客更多访客>>

amin2007

haiyupeter

boomion

cheng_yong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

认识Dojo中的表单：Form

正如“认识Dojo中的界面控件 ”一文中提到的，Dijit库提供了一整套极其强大且灵活的基于Dojo的小部件(Widget)，帮助你很方便地增强Web应用的界面和功能。这些小部件包括下拉菜单、弹出菜单、对话框、页面布局、树、进度条、以及表单元素。很显然Dijit让这些控件变得很漂亮，但本文所关注的是它们增强的功能，尤其是对一个基本表单在可用性和有效性方面的增强。

Dijit实现的快速回顾
要在一个页面中使用Dijit所要做的第一件事情就是引入Dojo:

第二步是导入Dijit的主题样式表:

最后一步就是为BODY元素的class属性设置一个主题名:
<body class="claro">

增强基本表单元素
注意：本文将使用声明的方法创建小部件。你也可以用编程的方法创建任何部件，参见“认识Dojo中的界面控件”中的dojo.behavior。

增强我们的静态表单的第一步是增强表单元素自身。Dijit为每一种表单元素都提供了至少一种（有时有2-3种）对应了小部件。使用Dijit小部件的声明式创建法，以及dojoType属性，我们很快就能将静态表单中的每一样东西都变成小部件。
<form action="process.php" method="get"> <!– text inputs: dijit.form.TextBox –> <b>First Name: </b> <input type="text" name="firstName" placeholder="Your Name" id="firstName" dojoType="dijit.form.TextBox" /> <b>Website: </b> <input type="text" name="website" placeholder="Your Website" id="website" dojoType="dijit.form.TextBox" /> <!– radio buttons: dijit.form.FilteringSelect –> <b>Favorite Color: </b> <select name="color" id="color" dojoType="dijit.form.FilteringSelect"> <option value="">Select a Color</option> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> </select> <!– radio buttons: dijit.form.CheckBox –> <b>Send Emails? </b> <input type="checkbox" id="checkbox" checked="checked" dojoType="dijit.form.CheckBox" /> <!– radio buttons: dijit.form.RadioButton –> <b>Email Format: </b> <input type="radio" id="radio1" name="format" checked="checked" dojoType="dijit.form.RadioButton" /> <label for="radio1">HTML</label> <input type="radio" id="radio2" name="format" dojoType="dijit.form.RadioButton" /> <label for="radio2">Text</label> <!– submit button: dijit.form.Button –> <input type="submit" value="Submit Form" label="Submit Form" id="submitButton" dojoType="dijit.form.Button" /> </form>
好啦，现在我们这些静态的、有点乏味的表单元素已经披上了主题的外衣，而且还具备了更多的功能。关于我们创建的这些小部件，有以下几点需要说明：

FilteringSelect小部件在以下几个方面具有与原生的SELECT元素相同的功能：
- 初始选中具有selected属性的选项
- 选项集合是固定的，由OPTION元素的value属性及其文本所决定
- 允许键盘操作
FilteringSelect小部件在原生SELECT元素的基础上添加了如下功能：
- 可以在FilteringSelect的输入框中键入字符，自动完成功能会帮你自动匹配选项。
- 如果输入的值不在选项集合中，用户将看到一条错误提示信息。
- 你将对控件的显示具有更多的控制权。
Dojo1.5为INPUT元素新加了占位文本功能，因此你再也不用通过手工响应focus/blur事件来完成相同的功能了。

现在既然基本表单都已经变成小部件了，而且也具有了漂亮的主题，我们可以添加基本的输入验证功能了。

用Dojo实现表单验证
就像几乎所有的其他客户端问题一样，针对表单验证Dojo也提供了一套非常好的解决方案。
而且幸运的是，对于基本的表单验证，只涉及到少数几个关键的组件。

dijit.form.ValidationTextBox
对一个表单进行验证的前提之一，是决定哪些元素是必须的。假设第一个输入域是必须的，我们只需要将这个部件的dojoType从dijit.form.TextBox改成dijit.form.ValicationTextBox:
<input dojoType="dijit.form.ValidationTextBox" required="true" placeholder="Your Name" missingMessage="Ooops! You forgot your first name!" name="firstName" id="firstName" type="text" />
由于required="true"已经加到这个小部件中，一旦用户忘了在输入框中填入任何字符，一个错误图标以及一条提示信息就会显示出来。你可以通过设置missingMessage属性来配置提示信息的内容，否则的话将显示一条通用的错误信息。

如果这个输入框要求对输入的模式进行特殊的验证呢？那就是regExp属性的用武之地了：

<input dojoType="dijit.form.ValidationTextBox" required="true" regExp="(https?|ftp)://[A-Za-z0-9-_]+/.[A-Za-z0-9-_%&/?///.=]+" name="website" placeholder="Your Website" id="website" type="text" />
现在这个website输入框不仅要求必须有输入，而且输入的内容必须能够通过regExp属性的检测。

dojox.validate提供的验证工具
dojox.validate库包含了一大堆工具函数和正则表达式，用于验证表单元素的值。这些验证函数可以用于电子邮件地址、URL、电话号码、邮政编码等等许多东西。下面是一个在ValidationTextBox上使用dojox.validate的例子：

现在我们已经设置好了必须的输入域，接下来我们将用dijit.form.Form这个dojoType来增强最外面的这个form元素。
与dijit.form.Form结伴出现的是一个特殊的script元素。这个只用于Dojo的script元素是一个this.validate()测试，作用于dijit.form.Form实例。这个测试将为所有require="true"的元素进行验证。你也可以在这里添加你自己的验证代码。

<form dojoType="dijit.form.Form" action="process.php" method="get"> <script type="dojo/method" event="onSubmit"> <!– if (this.validate()) { alert(’Form is valid, submitting!’); } else { alert(’Form contains invalid. Please complete all required fields.’); return false; } return true; –> </script> <!– form fields here –> </form>

dijit.form工具集
在上边的例子里，我只涉及了最常使用的Dijit部件。Dijit里还有更多更为强大的表单控件。让我们来看看另外几个很有用的小部件。

DateTextBox
要求用户正确地格式化一个日期将是一场噩梦，尤其当其他表单元素依赖于这个日期域的值的时候。Dijit提供了一个dijit.form.DateTextBox类，它将显示一个用户友好的日历控件让用户选择日期。

<!– when the user focuses on this element, the calendar appears –> <input dojoType="dijit.form.DateTextBox" required="true" invalidMessage="Please provide a valid date." type="text" name="date" id="date" />

CurrencyTextBox
dijit.form.CurrencyTextBox类帮助用户根据地区设置正确地格式化并验证货币值。

<!– {fractional:true} means you must provide cents –> <input dojoType="dijit.form.CurrencyTextBox" required="true" constraints="{fractional:true}" currency="USD" invalidMessage="Please provide both dollars and cents." type="text" name="weekly_wages" id="weekly_wages" value="2000" />

Textarea
dojox.form.Textarea类增强了TEXTAREA元素，从而当用户输入的时候能够自动改变高度。

<textarea dojoType="dijit.form.Textarea" name="comments">

利用DojoX的替代部件增强基本的Dijit部件
DojoX包含了大量的增强的控件，它们和与许多Dijit部件一样好用，而且还解决了许多Dijit部件无法解决的问题。下面介绍几个著名的DojoX表单部件。

BusyButton
dijit.form.Button的确很好用，但如果我希望禁用这个按钮（避免重复提交）并在用户单击的时候提供一个反馈信息（例如“正在提交表单……”）呢？

我们可以用dojox.form.BusyButton做到这些：

<!– assuming dojox.form.BusyButton has been required… –> <button dojoType="dojox.form.BusyButton" busyLabel="Sending Data…"> Send Data </button>

CheckedMultiSelect
如何让我们的SELECT元素允许多选？

这是一个使用dojox.form.CheckedMultiSelect部件的好机会：

<!– assuming dojox.form.CheckedMultiSelect has been required… –> <select multiple="true" name="rockers" dojoType="dojox.form.CheckedMultiSelect"> <option value="Oasis">Oasis</option> <option value="Rod Stewart" selected="selected">Rod Stewart</option> <option value="Coldplay" selected="selected">Coldplay</option> <option value="Kings of Leon">Kings of Leon</option> </select>

PasswordValidator
如果我们的网站需要一个允许修改密码的表单怎么办？

dojox.form.PasswordValidator提供了所有拟需要的功能来快速实现它：

<!– assuming dojox.form.PasswordValidator has been required… –> <!– pwValidate is the name of your function that verifies the current password is correct –> <div dojoType="dojox.form.PasswordValidator" name="pwValidate"> <!– pwType=old is where the user must place their current password –> <input type="password" pwType="old" /> <!– pwType=new is where the proposed new password must be placed –> <input type="password" pwType="new" /> <!– pwType=new is where the user verifies their new pass –> <input type="password" pwType="verify" /> </div>

注意：
javascript验证并非服务器端验证的替代品。javascript只是通过提供即时响应来增强用户体验。

FileUploader
没有使用任何增强的文件上传控件可能是最差的一种表单控件。dojox.form.FileUploader提供了一个绝佳的解决方案，使上传的过程更为合理。

<!– assuming dojox.form.FileUploader has been required… –> <div class="uploadBtn" dojoType="dojox.form.FileUploader" hoverClass="uploadHover" pressClas="uploadPress" activeClass="uploadBtn" disabledClass="uploadDisable" uploadUrl="/upload-files.php">Select Files</div>
dojox.form工具集
dojox.form名字空间包含了大量的增强部件，包括：

BusyButton 具有特殊的禁用/忙碌标签的按钮
CheckedMultiSelect 把你的具有“multiple”属性的SELECT元素变成一系列CheckBox的利器
DropDownStack 通过简单的选择来启用/禁用表单元素
RangeSlider 通过滑动滑块来选择值
Rating 方便地创建打分控件（星级打分）
……以及更多其他东西！

小结

Dijit库不仅仅让你的界面元素变得光彩照人，它更是一个能让你、开发者、以及你的用户的生活都更美好一些的庞大工具集。

分享到：

浅析dojo中的有状态对象 | Dojo历史简介

2010-08-26 15:01
浏览 816
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论