dijit/form/ValidationTextBox
簡介
檢核文字框 (ValidationTextBox) 的模組名稱是 dijit/form/ValidationTextBox 。這個模組是用來輸入文字資料，同時對輸入的資料做條件檢核。
網頁應用系統一般的習慣是在前端（流覽器）檢核輸入資料的格式及其正確性，而業務邏輯的正確性則在後端（伺服器）上做檢查。而檢核項目是屬於資料的正確性或是業務邏輯的正確性，則需要小心界定。特別是數值的部份，舉例來說，「購買數量的上限」到底是屬於資料的正確性，還是屬於業務還輯的正確性？如果劃分為資料的正確性而在前端做檢核，當變更購買數量上限時，所有在前端有用到這個欄位的網頁都得要做修正，除非特別為這個欄位建立一個類別 (Class) 而在類別裡定義檢核的條件。如果在後端做檢核，理論上而言，只要修改一個地方即可；但如果後端的程式架構沒有設計好，檢核條件都寫死在各程式中，修改起來，恐怕也很讓人頭痛。
範例
範例中展示一個文字輸入檢核框。
欄位輸入提示訊息：
欄位未輸入值的警告訊息，警告訊息在點按驚嘆號或欄位時才會出現：
欄位值格式錯誤的訊息，每輸入一個字元後都會立即做檢核，一檢查到錯誤，就會出現錯誤訊息：
CSS
<style>
input, textarea {
font-family: monospace;
}
</style>
input, textarea{} 將輸入欄位的字型改成定寬 (Fixed-Width) 字型，這樣欄位的寬度比較好計算。
HTML
<body class="claro">
</body>
當套用 dojo 的外觀時， HTML 中的 size 屬性不起作用，一定得用 style 去設定欄位寬度，而且長度還很不好抓，實驗結果大約是：字母數 x 0.7em。如果修改了 font-size 屬性，也許又得做實驗了。
proptMessage 的訊息為欄位獲得焦點 (focus) 的提示輸入訊息。
missingMessage 是在欄位失去焦點 (blur) 卻沒有輸入值時的警告訊息
invalidMessage 欄位的輸入值不合格式要求 (invalid) 時的錯誤訊息。
tooptipPosition 需給予一個指定方位的陣列，訊息會依陣列中方位的前後次序，在螢幕上尋找合適的空間顯示訊息。範例中給的值是 "['below', 'above']"，因此訊息會優先出現在欄位的下方，如果此時欄位已經在流覽器視野 (viewport) 的最下方時，訊息就會採用第二順位的位置，出現在欄位的上方。如果屬性值是 "['after', 'before']" 時，訊息就出現在欄位的右方，右方沒有位置時，就出現在左方，以此類推。也可以把四個方向的值都放到陣列中，讓流覽器在上下左右找個最合適的位置顯示訊息。
訊息在顯示時，用的是 dijit/Tooltip 這個元件，字型的大小比 HTML 預設 title 屬性的字型要大些，看得比較清楚。
regExp 定義欄位值的有效輸入格式，用以檢核欄位的輸入值。
Script
因為用宣告法產生介面元件，Javascript 程式中沒有做其它事。
沒有留言:
張貼留言