转自网络认识Dojo中的表单.docx

转自网络认识Dojo中的表单.docx

《转自网络认识Dojo中的表单.docx》由会员分享，可在线阅读，更多相关《转自网络认识Dojo中的表单.docx（10页珍藏版）》请在冰豆网上搜索。

转自网络认识Dojo中的表单

认识Dojo中的表单：

Form

分类：

 Dojo控件（dijit） Dojo扩展（dojox）2010-08-2615:

01 10846人阅读 评论（9） 收藏 举报

dojowebsiteinputreference正则表达式constraints

认识Dojo中的表单：

Form 

正如“认识Dojo中的界面控件 ”一文中提到的，Dijit库提供了一整套极其强大且灵活的基于Dojo的小部件（Widget），帮助你很方便地增强Web应用的界面和功能。

这些小部件包括下拉菜单、弹出菜单、对话框、页面布局、树、进度条、以及表单元素。

很显然Dijit让这些控件变得很漂亮，但本文所关注的是它们增强的功能，尤其是对一个基本表单在可用性和有效性方面的增强。

Dijit实现的快速回顾 

要在一个页面中使用Dijit所要做的第一件事情就是引入Dojo:

[xhtml] viewplaincopy

1.

true,parseOnLoad:

true">  

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

最后一步就是为BODY元素的class属性设置一个主题名:

[xhtml] viewplaincopy

1.  

增强基本表单元素 

注意 ：

本文将使用声明的方法创建小部件。

你也可以用编程的方法创建任何部件，参见“认识Dojo中的界面控件”中的dojo.behavior。

增强我们的静态表单的第一步是增强表单元素自身。

Dijit为每一种表单元素都提供了至少一种（有时有2-3种）对应了小部件。

使用Dijit小部件的声明式创建法，以及dojoType属性，我们很快就能将静态表单中的每一样东西都变成小部件。

[xhtml] viewplaincopy

1.  

2.

– text inputs:

  dijit.form.TextBox –>  

3.First Name:

4.  

5.Website:

6.  

7.

– radio buttons:

  dijit.form.FilteringSelect –>  

8.Favorite Color:

9.  

10.        Select a Color  

11.        Red  

12.        Green  

13.        Blue  

14.  

15.

– radio buttons:

  dijit.form.CheckBox –>  

16.Send Emails?

17.  

18.

– radio buttons:

  dijit.form.RadioButton –>  

19.Email Format:

20.  

21.HTML  

22.     

23.  

24.Text  

25.

– submit button:

  dijit.form.Button –>  

26.  

27.  

好啦，现在我们这些静态的、有点乏味的表单元素已经披上了主题的外衣，而且还具备了更多的功能。

关于我们创建的这些小部件，有以下几点需要说明：

∙FilteringSelect小部件在以下几个方面具有与原生的SELECT元素相同的功能：

o初始选中具有selected属性的选项

o选项集合是固定的，由OPTION元素的value属性及其文本所决定

o允许键盘操作

∙FilteringSelect小部件在原生SELECT元素的基础上添加了如下功能：

o可以在FilteringSelect的输入框中键入字符，自动完成功能会帮你自动匹配选项。

o如果输入的值不在选项集合中，用户将看到一条错误提示信息。

o你将对控件的显示具有更多的控制权。

∙Dojo1.5为INPUT元素新加了占位文本功能，因此你再也不用通过手工响应focus/blur事件来完成相同的功能了。

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

用Dojo实现表单验证 

就像几乎所有的其他客户端问题一样，针对表单验证Dojo也提供了一套非常好的解决方案。

而且幸运的是，对于基本的表单验证，只涉及到少数几个关键的组件。

dijit.form.ValidationTextBox 

对一个表单进行验证的前提之一，是决定哪些元素是必须的。

假设第一个输入域是必须的，我们只需要将这个部件的dojoType从dijit.form.TextBox改成dijit.form.ValicationTextBox:

[xhtml] viewplaincopy

1.

  You forgot your first name!

" name="firstName" id="firstName" type="text" />  

由于required="true"已经加到这个小部件中，一旦用户忘了在输入框中填入任何字符，一个错误图标以及一条提示信息就会显示出来。

你可以通过设置missingMessage属性来配置提示信息的内容，否则的话将显示一条通用的错误信息。

如果这个输入框要求对输入的模式进行特殊的验证呢？

那就是regExp属性的用武之地了：

[xhtml] viewplaincopy

1.

|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的例子：

[xhtml] viewplaincopy

1.  

2.dojo.require（"dojox.validate"）;  

3.dojo.require（"dojox.validate.web"）;  

4.  

5.Email:

6.  

validator属性是一个指向电子邮件验证函数的引用。

如果你不擅长正则表达式dojox.validation就变得非常有用了。

这里面还包含了特定于语言的工具包。

其API文档提供了dojox.validate工具的完整列表。

dijit.form.Form及其onSubmit事件

现在我们已经设置好了必须的输入域，接下来我们将用dijit.form.Form这个dojoType来增强最外面的这个form元素。

与dijit.form.Form结伴出现的是一个特殊的script元素。

这个只用于Dojo的script元素是一个this.validate（）测试，作用于dijit.form.Form实例。

这个测试将为所有require="true"的元素进行验证。

你也可以在这里添加你自己的验证代码。

[xhtml] viewplaincopy

1.  

2.  

3.

–  

4.if （this.validate（）） {  

5.        alert（’Form is valid, submitting!

’）;  

6.} else {  

7.        alert（’Form contains invalid.  Please complete all required fields.’）;  

8.        return false;  

9.}  

10.return true;  

11.–>  

12.  

13.

– form fields here –>  

14.  

dijit.form工具集 

在上边的例子里，我只涉及了最常使用的Dijit部件。

Dijit里还有更多更为强大的表单控件。

让我们来看看另外几个很有用的小部件。

DateTextBox 

要求用户正确地格式化一个日期将是一场噩梦，尤其当其他表单元素依赖于这个日期域的值的时候。

Dijit提供了一个dijit.form.DateTextBox类，它将显示一个用户友好的日历控件让用户选择日期。

[xhtml] viewplaincopy

1.

– when the user focuses on this element, the calendar appears –>  

2.  

CurrencyTextBox 

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

[xhtml] viewplaincopy

1.

– {fractional:

true} means you must provide cents –>  

2.

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元素，从而当用户输入的时候能够自动改变高度。

[xhtml] viewplaincopy

1.  

利用DojoX的替代部件增强基本的Dijit部件 

DojoX包含了大量的增强的控件，它们和与许多Dijit部件一样好用，而且还解决了许多Dijit部件无法解决的问题。

下面介绍几个著名的DojoX表单部件。

BusyButton 

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

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

[xhtml] viewplaincopy

1.

– assuming dojox.form.BusyButton has been required… –>  

2.  

3.    Send Data  

4.  

CheckedMultiSelect 

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

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

[xhtml] viewplaincopy

1.

– assuming dojox.form.CheckedMultiSelect has been required… –>  

2.  

3.        Oasis  

4.        Rod Stewart  

5.        Coldplay  

6.        Kings of Leon  

7.  

PasswordValidator 

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

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

[xhtml] viewplaincopy

1.

– assuming dojox.form.PasswordValidator has been required… –>  

2.

– pwValidate is the name of your function that verifies the current password is correct –>   

3.  

4.        

– pwType=old is where the user must place their current password –>  

5.          

6.        

– pwType=new is where the proposed new password must be placed –>  

7.          

8.        

– pwType=new is where the user verifies their new pass –>  

9.          

10.