Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法，下面来介绍一下验证框(ValidateBox)的详细用法（查看演示）：
HTML 代码
- <input id="vv" required="true" validType="email">
然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：
- $('#vv').validatebox(options)
下面介绍一下验证规则：
验证规则是通过使用属性 “required”和”validType”来定义的，已经实施的规则如下：
- email: 匹配电子邮件正则表达式规则
- url: 匹配URL正则表达式规则
- length[0,100]: 允许字符串长度的范围
当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：
- $.extend($.fn.validatebox.defaults.rules, {
- minLength: {
- validator: function(value, param){
- return value.length >= param[0];
- },
- message: 'Please enter at least {0} characters.'
- }
- });
定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：
- <input class="easyui-validatebox" validType="minLength[5]">
下面来介绍更多的用法：属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| required | 布尔 | 定义文本域是否为必填项 | false |
| validType | 字符串 | 定义字段的验证类型，比如email, url, etc. | null |
| missingMessage | 字符串 | 当文本框为空时提示的文本信息 | This field is required. |
| invalidMessage | 字符串 | 当文本框内容不合法时提示的文本信息 | null |
方法
| 方法名 | 参数 | 描述 |
|---|---|---|
| destroy | none | 删除并且销毁组件 |
| validate | none | 做验证以确定文本框的内容是否是有效的。 |
| isValid | none | 调用验证方法并返回验证结果，true或者false |
注意这里除了required属性外,若validType属性失败.并不会阻止表单提交..所以我们这里如果要阻止表单提交
那么又要利用jquery ui提交的表单方法
具体写法是
$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
if(!$("#form").form('validate')){
return false;
}
})
#form是<form>表单的ID...