JQUERY EASYUI 验证框(VALIDATEBOX)用法

Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法，下面来介绍一下验证框(ValidateBox)的详细用法（查看演示）：

HTML 代码

1. <input id="vv" required="true" validType="email">

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：

1. $('#vv').validatebox(options)

下面介绍一下验证规则：
验证规则是通过使用属性 “required”和”validType”来定义的，已经实施的规则如下：

• email: 匹配电子邮件正则表达式规则
• url: 匹配URL正则表达式规则
• length[0,100]: 允许字符串长度的范围

当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：

1. $.extend($.fn.validatebox.defaults.rules, {
2.     minLength: {
3.         validator: function(value, param){
4.             return value.length >= param[0];
5.         },
6.         message: 'Please enter at least {0} characters.'
7.     }
8. });

定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：

1. <input class="easyui-validatebox" validType="minLength[5]">

下面来介绍更多的用法：属性

属性名类型描述默认值required布尔定义文本域是否为必填项falsevalidType字符串定义字段的验证类型，比如email, url, etc.nullmissingMessage字符串当文本框为空时提示的文本信息This field is required.invalidMessage字符串当文本框内容不合法时提示的文本信息null

方法

方法名参数描述destroynone删除并且销毁组件validatenone做验证以确定文本框的内容是否是有效的。isValidnone调用验证方法并返回验证结果，true或者false

演示

注意这里除了required属性外,若validType属性失败.并不会阻止表单提交..所以我们这里如果要阻止表单提交

那么又要利用jquery ui提交的表单方法

具体写法是

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})

#form是<form>表单的ID...