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...
 

JQUERY EASYUI 验证框(VALIDATEBOX)用法的更多相关文章

  1. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  2. jQuery EasyUI 数字框(NumberBox)用法

    这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可 ...

  3. EasyUI 验证框使用方法

    使用过程中的一积累,备查. EasyUI 验证框使用方法://***************************missingMessage:未填写时显示的信息validType:验证类型见下示例 ...

  4. Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式

    Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...

  5. easyUI验证框赋值

    下面来看看easyui的各种验证框赋值的方式: <input name="userId" id="userId" class="easyui-n ...

  6. easyui 验证框

    转自:http://blog.csdn.net/pqszq1314/article/details/25896163 例如 校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<inp ...

  7. jQuery easyui 提示框

    1:弹出提示窗的使用 (1)屏幕右下弹出提示窗口: $.messager.show({ title:'My Title', msg:'Message will be closed after 4 se ...

  8. jquery easyui datagrid的一些用法

    获取选中的多选数据 var rows = $('#Id').datagri('getSelections'); 选中单行的数据 var row = $(#Id).datagrid('getSelect ...

  9. Jquery easyui中的有效性检查

    使用过程中的一积累,备查. EasyUI 验证框使用方法: //*************************** missingMessage:未填写时显示的信息 validType:验证类型见 ...

随机推荐

  1. [转]linux CentOS 安装 Nginx

    网上找的教程,一路走下来的,原文如下: 一.安装nginx     1.在nginx官方网站下载一个包,下载地址是:http://nginx.org/en/download.html     2.Wi ...

  2. 跨浏览器兼容的HTML5视频音频播放器

    HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件.而html5medi ...

  3. Linux资源监控命令/工具(调试)

    1.直接将指令丢到背景中执行:& [root@linux ~]# tar -zpcvf /tmp/etc.tar.gz /etc > /tmp/log.txt 2>&1 & ...

  4. iOS8 Size Classes的理解与使用

    在iOS8中,新增了Size Classes特性,它是对当前所有iOS设备尺寸的一个抽象,也是该抽象了,想想现在多少种iOS尺寸的设备吧:iPhone4-5-6-6plus.iPad.iPad min ...

  5. 【查找结构 2】二叉查找树 [BST]

    当所有的静态查找结构添加和删除一个数据的时候,整个结构都需要重建.这对于常常需要在查找过程中动态改变数据而言,是灾难性的.因此人们就必须去寻找高效的动态查找结构,我们在这讨论一个非常常用的动态查找树— ...

  6. 转 RMI、RPC、SOAP通信技术介绍及比对

    http://www.open-open.com/home/space.php?uid=37924&do=blog&id=8974 1.RMI 使用java的程序员,对于RMI(Rem ...

  7. 卷积神经网络和CIFAR-10:Yann LeCun专访 Convolutional Nets and CIFAR-10: An Interview with Yann LeCun

    Recently Kaggle hosted a competition on the CIFAR-10 dataset. The CIFAR-10 dataset consists of 60k 3 ...

  8. Activity Recognition行为识别

    暑假听了computer vision的一个Summer School,里面Jason J. Corso讲了他们运用Low-Mid-High层次结构进行Video Understanding 和 Ac ...

  9. 《Linux/Unix系统编程手册》读书笔记6

    <Linux/Unix系统编程手册>读书笔记 目录 第9章 这章主要讲了一堆关于进程的ID.实际用户(组)ID.有效用户(组)ID.保存设置用户(组)ID.文件系统用户(组)ID.和辅助组 ...

  10. Eclipse 下如何引用另一个项目的Java文件

    有关联的2个项目,有些类是相同的.例如实体类. 如果你采用 Ctrl + C & Ctrl + V 的方式,以后再有改动,2个项目就都需要改动. 怎样才能只改动一个呢? 答案就是,在一个项目( ...