認識Dojo中的表單：Form
正如“認識Dojo中的介面控制項
”一文中提到的，Dijit庫提供了一整套極其強大且靈活的基於Dojo的小組件(Widget)，協助你很方便地增強Web應用的介面和功能。這些小組件包括下拉式功能表、快顯功能表、對話方塊、頁面配置、樹、進度條、以及表單元素。很顯然Dijit讓這些控制項變得很漂亮，但本文所關注的是它們增強功能，尤其是對一個基本表單在可用性和有效性方面的增強。
Dijit實現的快速回顧
要在一個頁面中使用Dijit所要做的第一件事情就是引入Dojo:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js" djConfig="isDebug:true,parseOnLoad:true"></script>
第二步是匯入Dijit的主題樣式表:
最後一步就是為BODY元素的class屬性設定一個主題名:
<body class="claro">
增強基本表單元素
注意
：本文將使用聲明的方法建立小組件。你也可以用編程的方法建立任何組件，參見“認識Dojo中的介面控制項”中的dojo.behavior。
增強我們的靜態表單的第一步是增強表單元素自身。Dijit為每一種表單元素都提供了至少一種（有時有2-3種）對應了小組件。使用Dijit小組件的聲明式建立法，以及dojoType屬性，我們很快就能將靜態表單中的每一樣東西都變成小組件。
<form action="process.php" method="get"><br /><!– text inputs: dijit.form.TextBox –><br /><b>First Name: </b><br /><input type="text" name="firstName" placeholder="Your Name" id="firstName" dojoType="dijit.form.TextBox" /><br /><b>Website: </b><br /><input type="text" name="website" placeholder="Your Website" id="website" dojoType="dijit.form.TextBox" /><br /><!– radio buttons: dijit.form.FilteringSelect –><br /><b>Favorite Color: </b><br /><select name="color" id="color" dojoType="dijit.form.FilteringSelect"><br /> <option value="">Select a Color</option><br /> <option value="Red">Red</option><br /> <option value="Green">Green</option><br /> <option value="Blue">Blue</option><br /></select><br /><!– radio buttons: dijit.form.CheckBox –><br /><b>Send Emails? </b><br /><input type="checkbox" id="checkbox" checked="checked" dojoType="dijit.form.CheckBox" /><br /><!– radio buttons: dijit.form.RadioButton –><br /><b>Email Format: </b><br /><input type="radio" id="radio1" name="format" checked="checked" dojoType="dijit.form.RadioButton" /><br /><label for="radio1">HTML</label></p><p><input type="radio" id="radio2" name="format" dojoType="dijit.form.RadioButton" /><br /><label for="radio2">Text</label><br /><!– submit button: dijit.form.Button –><br /><input type="submit" value="Submit Form" label="Submit Form" id="submitButton" dojoType="dijit.form.Button" /><br /></form>
好啦，現在我們這些靜態、有點乏味的表單元素已經披上了主題的外衣，而且還具備了更多的功能。關於我們建立的這些小組件，有以下幾點需要說明：
現在既然基本表單都已經變成小組件了，而且也具有了漂亮的主題，我們可以添加基本的輸入驗證功能了。
用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庫包含了一大堆工具函數和Regex，用於驗證表單元素的值。這些驗證函式可以用於電子郵件地址、URL、電話號碼、郵遞區號等等許多東西。下面是一個在ValidationTextBox上使用dojox.validate的例子：
<script type="text/javascript"><br />dojo.require("dojox.validate");<br />dojo.require("dojox.validate.web");<br /></script><br /><strong>Email:</strong><br /><input type="text" required="true" name="email" id="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" />
validator屬性是一個指向電子郵件驗證函式的引用。如果你不擅長Regexdojox.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"的元素進行驗證。你也可以在這裡添加你自己的驗證代碼。
<form dojoType="dijit.form.Form" action="process.php" method="get"><br /><script type="dojo/method" event="onSubmit"><br /><!–<br />if (this.validate()) {<br /> alert(’Form is valid, submitting!’);<br />} else {<br /> alert(’Form contains invalid. Please complete all required fields.’);<br /> return false;<br />}<br />return true;<br />–><br /></script><br /><!– form fields here –><br /></form>
dijit.form工具集
在上邊的例子裡，我只涉及了最常使用的Dijit組件。Dijit裡還有更多更為強大的表單控制項。讓我們來看看另外幾個很有用的小組件。
DateTextBox
要求使用者正確地格式化一個日期將是一場噩夢，尤其當其他表單元素依賴於這個日期域的值的時候。Dijit提供了一個dijit.form.DateTextBox類，它將顯示一個方便使用的日曆控制項讓使用者選擇日期。
<!– when the user focuses on this element, the calendar appears –><br /><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 –><br /><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… –><br /><button dojoType="dojox.form.BusyButton" busyLabel="Sending Data…"><br /> Send Data<br /></button>
CheckedMultiSelect
如何讓我們的SELECT元素允許多選？
這是一個使用dojox.form.CheckedMultiSelect組件的好機會：
<!– assuming dojox.form.CheckedMultiSelect has been required… –><br /><select multiple="true" name="rockers" dojoType="dojox.form.CheckedMultiSelect"><br /> <option value="Oasis">Oasis</option><br /> <option value="Rod Stewart" selected="selected">Rod Stewart</option><br /> <option value="Coldplay" selected="selected">Coldplay</option><br /> <option value="Kings of Leon">Kings of Leon</option><br /></select>
PasswordValidator
如果我們的網站需要一個允許修改密碼的表單怎麼辦？
dojox.form.PasswordValidator提供了所有擬需要的功能來快速實現它：
<!– assuming dojox.form.PasswordValidator has been required… –><br /><!– pwValidate is the name of your function that verifies the current password is correct –><br /><div dojoType="dojox.form.PasswordValidator" name="pwValidate"><br /> <!– pwType=old is where the user must place their current password –><br /> <input type="password" pwType="old" /><br /> <!– pwType=new is where the proposed new password must be placed –><br /> <input type="password" pwType="new" /><br /> <!– pwType=new is where the user verifies their new pass –><br /> <input type="password" pwType="verify" /><br /></div>
注意：
javascript驗證並非伺服器端驗證的替代品。javascript只是通過提供即時響應來增強使用者體驗。
FileUploader
沒有使用任何增強檔案上傳控制項可能是最差的一種表單控制項。dojox.form.FileUploader提供了一個絕佳的解決方案，使上傳的過程更為合理。
<!– assuming dojox.form.FileUploader has been required… –><br /><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名字空間包含了大量的增強組件，包括：
小結
Dijit庫不僅僅讓你的介面元素變得光彩照人，它更是一個能讓你、開發人員、以及你的使用者的生活都更美好一些的龐大工具集。
相關資源:
本文翻譯自：http://www.sitepen.com/blog/2010/08/11/dive-into-dijit-forms/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
