【连载】研究EasyUI系统—ValidateBox组件

　　validatebox组件是所有可验证组件的“父类”，依赖它的组件包括textbox等，而它依赖于tooltip组件。validatebox最大的作用在于它具有验证用户输入的能力，它能让开发者省去很多用户输入校对的工作，更专心于业务逻辑的开发。

　　

validatebox的html构造形式如下：

validatebox的js构造形式如下：

<input id="vbox" />
<script>
    $("#vbox").validatebox({
        required: true,
        validType: 'email',
        missingMessage: '内容不能为空',
        invalidMessage: '内容无效',
        onValidate:function(v) {
            if(v) {
                alert("验证通过");
            }
        }
    });
</script>
           

　　validatebox以

<input>

标签为基础，html和js形式的validatebox均构造了一个验证email格式的输入框，效果如下：

　　上例代码构造了validatebox的一些属性和它的验证事件。

　　reqiured属性表明是否为“必需”项。

　　validType表明验证的类型，此处“email”表明是否为电子邮件的格式。

　　missingMessage显示了组件内容为空时的提示信息。

　　invalidMessage表示输入的内容不符合validType指定的类型时所提示的信息，本例中如果用户输入的内容不是有效的email地址，将提示“内容无效”。

　　

validatebox属性：

属性名称	属性值类型	属性默认值	描述
required	布尔值	false	是否必须验证。
validType	字符串，数组	null	验证类型。
delay	数值	200	输入完成直至验证的中间时间间隔。
missingMessage	字符串	“This field is required.”	组件内容为空时的提示信息。
invalidMessage	字符串	null	组件内容无效时的提示信息。
tipPosition	字符串	“right”	提示信息在组件中所处的位置。 有“right”和“left”两种位置。
deltaX	数值	提示信息距离组件的水平偏移位置。
novalidate	布尔值	false	组件是否开启验证功能。

　　missingMessage表示当组件输入的内容为空时所提示的信息，默认是”This field is required”，显示这串英文字符串的前提条件是用户没有导入中文语言包，如果导入

easyui/locale/easyui-lang-zh_CN.js

中文语言包，则会变成中文提示信息“该输入项为必输项”。

　　invalidMessage用法及前提条件和missingMessage类似，当组件输入的内容不符合要求时将提示信息。导入了中文语言包后，如果输入的内容不是有效的电子邮件地址，便会提示“请输入有效的电子邮件地址”。

　　validType属性可是重头戏。validType的作用是指定组件验证的类型，如果validType为”email”，那么所有输入的内容不符合电子邮件格式的，将会报错。

　　easyui框架内，validType属性已经实现了”email”、”url”、”length:[x,y]”、”remote:[url,p]”四个类型。

　　email代表电子邮件。

　　url代表超链接。

　　length:[x,y]表示允许x和y长度之间的字符（如length:[10,50]）。

　　remote:[url,p]表示向远程地址发送ajax请求来进行验证，url表示远程地址，p表示向url发送请求时所携带的参数，返回true表示成功。如remote:[‘test/test.php’,’address’]，则向test/test.php发送请求，并携带名为address的参数，该参数的值就是组件输入的内容。

　　validType属性在使用语法上也根据类型不同而不同，目前有三种形式。

　　第一种是单独的字符串形式，也是最简单的一种，上例代码中便是这种形式。

　　第二种是键值对形式，请看以下代码：

$("#vbox").validatebox({
    validType:['url', 'length[3,50]']
});
           

　　代码展示了键值对的用法，语法上与第一种有区别。它表示使用url的验证规则，并且url的长度在3到50个字符之间。

　　第三种是多个数组的形式，这种形式最灵活，能匹配多个规则。

$("#vbox").validatebox({
    validType:{
        length[,],
        remote:['test/test.php','address']
    }
});
           

　　第三种语法与第一和第二种又有区别。这种验证方式由包含多个验证规则的数组组成，它的含义为输入内容的长度必须在3至50个字符之间，并提交给test/test.php验证，提交时携带名为address的参数。

　　关于验证方式，还可以有其他更高级的自定义方法，会另设一文讲述。

　　

validatebox方法：

方法名称	参数	描述
options	无	返回所有属性。
destroy	无	销毁组件。
validate	无	对组件内容进行验证。
isValid	无	调用validate方法并返回类型为布尔值的验证结果。
enableValidation	无	开启验证模式。1.3.4及以上版本支持。
disableValidation	无	关闭验证模式。1.3.4及以上版本支持。

　　validate方法用于验证组件的内容，在验证不通过的情况下，返回组件的信息，返回值是组件的对象。

　　isValid方法也用于验证组件的内容，它先调用validate方法，继而返回布尔值，表示验证是否通过。

　　enableValidation和disableValidation方法分别表示开启和关闭验证模式。

　　

validatebox事件：

事件名称	参数	描述
onBeforeValidate	无	验证前触发。1.4及以上版本支持。
onValidate	valid	验证时触发。1.4及以上版本支持。。

　　onBeforeValidate事件在验证前触发。

　　onValidate事件在验证时触发，参数valid是布尔值，表示验证是否通过。用户在validatebox组件中每输入一个字符，都会触发本事件，并传递valid参数。以输入类型为email作为例子，用户每输入一个字符，valid参数均为false，表示不符合验证规则，直至用户输完符合email规则的最后一个字符，valid参数为true，表示验证通过。