Dojo中表單驗證器的使用

本文翻譯自：http://dojotoolkit.org/documentation/tutorials/1.7/validation/

在這篇教程中，你將學習如何利用dojox/validate某愛去驗證表單值的有效性。

* 難度: 初級

* Dojo版本: 1.7

開始

dojox/validate是一個包含了很多通用驗證邏輯的工具集，比如檢查email地址的合法性，郵遞區號，電話號碼等等。這些工具都是純API邏輯的，並不包含使用者介面。但是可以很容易被用於各種有驗證功能的控制項。在這個教程中，我們將看看dojox/validate下有哪些可用的工具，以及如何直接使用或者結合dijit使用。

開始用這些工具之前，首先require對應的模組：

require(["dojox/validate"], function(validate) {     });

這樣你就可以直接使用一些基本的功能了，比如：

validate.isInRange(test, options);validate.isNumberFormat(test, options);validate.isText(test, options);validate.isValidLuhn(test);

這裡的每一個方法（除了isValidLuhn）都可以接受一個額外的配置參數optons，來指定額外的驗證資訊。比如：isNumberFormat方法可以指定數位格式，比如：

var test = validate.isNumberFormat(someNum, { format: "(###) ###-####" });

格式資訊也可以以數組的方式指定，比如：

var test = validate.isNumberFormat(someNum, {    format: ["### ##", "###-##", "## ###"]});

* 幾乎所有的驗證方法都可以接受選項進行定製，在API文檔 the API documentation tools 中有詳細的協助資訊。

其他的驗證方法

很顯然上面的4個方法還遠遠不夠，dojox/validate還包含了很多其他的驗證規則供你使用，比如：

validate.creditCardvalidate.isbnvalidate.web

和其他很多dojo模組不太一樣，require一個validate模組不會建立新的獨立對象，而是為dojox/validate模組增加更多的方法。例如，如果你的應用需要web相關的一些驗證，可以用如下代碼：

require(["dojox/validate/web"], function(validate) {    validate.isEmailAddress(someAddress);});

最後，還有2個模組專門用於北美和加拿大相關的格式資訊：dojox/validate/us and dojox/validate/ca。這些模組提供了國家相關的電話號碼，郵遞區號，社保號等資訊的驗證。

如果你的應用使用直接的HTML表單Form，dojox/validate提供了一個稱之為check的模組，可以讓你去定義一個驗證邏輯的設定檔（profile），你可以用這個設定檔來確保表單中的輸入值都是有效。這個設定檔是一個javascript對象，功能相當強大，它提供了filter來過濾表單值，定義了哪些表單域是必須的，定義了表單域的相互依賴（比如一個表單域依賴於另外一個表單域），定義了值的規則，以及需要確認的表單域（例如：密碼值通常要輸入兩遍以確認）。

要使用一個合法性檢查器，需要如下的代碼：

// Since dojox/validate/check and dojox/validate/web extend dojox/validate, we don't need to explicitly require itrequire(["dojox/validate/check", "dojox/validate/web"], function(validate) {    var profile = {        trim: [ "field1", "field2" ],        required: [ "field1", "pwd", "pwd2" ],        constraints: {            field1: myValidationFunction,            field2: [validate.isEmailAddress, false, true]        },        confirm: {            pwd2: "pwd"        }    }     //  later on in the app, probably onsubmit on the form:    var results = validate.check(document.getElementById, profile);});

dojox/validate/check的傳回值是一個包含若干方法的對象，通過這個對象你可以觀察相關驗證的結果，比如：

isSuccessful(): Returns true if there were no invalid or missing fields,                else it returns false.hasMissing():  Returns true if the results contain any missing fields.getMissing():  Returns a list of required fields that have values missing.isMissing(field):  Returns true if the field is required and the value is missing.hasInvalid():  Returns true if the results contain fields with invalid data.getInvalid():  Returns a list of fields that have invalid values.isInvalid(field):  Returns true if the field has an invalid value.

驗證器的基本思想就是在提交資料之前進行驗證，並告訴你驗證的結果的詳細資料。通過下面的demo你可以看到實際的應用情境：

View Demo

dojox/validate/check的文檔並不是非常完整，但是原始碼的注釋裡面有如何構造profile的詳細資料。

在基於Dijit的表單裡使用dojox/validate

當然，你也可以結合dojox/validate和dijit一起使用，特別是dijit的ValidationTextBox。這裡的關鍵是ValidationTextBox的validator方法。在HTML標記或者程式建立的Dijit裡，你所需要的只是指定一個validator：

require(["dijit/form/ValidationTextBox", "dojox/validate/web"])

通過HTML標記建立：

<input id="email" name="email"    data-dojo-type="dijit.form.ValidationTextBox"    data-dojo-props="validator:dojox.validate.isEmailAddress,        invalidMessage:'This is not a valid email!'"    />

如果你希望ValidationTextBox使用一個可選的關鍵字參數，只需要設定一下constraints屬性：

<input id="range" name="range"    data-dojo-type="dijit.form.ValidationTextBox"    data-dojo-props="validator:dojox.validate.isInRange,        constraints:{ min:10, max:100 },        invalidMessage:'This is not within the range of 10 to 100!'"    />

Demo如下：
View Demo

結語

綜上所述，dojox/validate提供了很多常用且強大的驗證邏輯，同時這些邏輯也是高度可定製的。無論在純的HTML表單還是使用了Dijit的表單，你都可以很方便的使用這些驗證邏輯，從而提高開發的效率。