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.creditCard validate.isbn validate.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 it require(["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的表单，你都可以很方便的使用这些验证逻辑，从而提高开发的效率。