JQUERY EASYUI 验证框(VALIDATEBOX)用法

时间:2021-03-01 02:15:42

Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法,下面来介绍一下验证框(ValidateBox)的详细用法(查看演示):
JQUERY EASYUI 验证框(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...