本文翻译自: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的表单,你都可以很方便的使用这些验证逻辑,从而提高开发的效率。