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	布尔	定义文本域是否为必填项	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;
}
})

 

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

 

转自:http://blog.csdn.net/zouhao619/article/details/6918583