当前位置 : 主页 > 网页制作 > Dojo >

Dojo中表单验证器的使用

来源:互联网 收集:自由互联 发布时间:2021-06-15
本文翻译自:http://dojotoolkit.org/documentation/tutorials/1.7/validation/ 在这篇教程中,你将学习如何利用dojox/validate某爱去验证表单值的有效性。 * 难度: 初级 * Dojo版本: 1.7 开始 dojox/validate是一

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

网友评论