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. Random.Next 方法 (Int32, Int32)

    minValue 返回的随机数的下界(随机数可取该下界值). maxValue 返回的随机数的上界(随机数不能取该上界值).maxValue 必须大于等于 minValue. 返回值 一个大于等于 m ...

  2. Windows 下 玩转Node.JS

    vs一直是用的比较舒服的IDE,一直期望可以支持Node.JS.终于找到了一个工具 NTVS(Node.JS Tool For VS). 主页:https://nodejstools.codeplex ...

  3. ps -ef能列出进程号,和端口号没任何关系

    1.ps -ef显示所有进程ID 2.netstat才显示端口号情况

  4. HTML5文档结构语义:页眉的header和hgroup标签使用

    HTML5提供了新的结构元素——例如header.hgroup.article.section.footer.nav等来定义网页,将使网页结构更加简洁严谨,语义更加结构化,而不用迂回通过class或i ...

  5. 《mysql悲观锁总结和实践》-悲观锁

    最近学习了一下数据库的悲观锁和乐观锁,根据自己的理解和网上参考资料总结如下: 悲观锁介绍(百科): 悲观锁,正如其名,它指的是对数据被外界(包括本系统当前的其他事务,以及来自外部系统的事务处理)修改持 ...

  6. Data Flow ->> Term Extraction

    中文意思是关键词抽取,用于计算在文本中哪些词汇或者词组出现的频率最高.其实算法有两张:1)Frequency 2)TFIDF TFIDF的全称是Term Frequency and Inverse D ...

  7. ARM处理器的寄存器,ARM与Thumb状态,7中运行模式 【转】

    转自:http://blog.chinaunix.net/uid-28458801-id-3494646.html ARM处理器工作模式一共有 7 种 : USR  模式    正常用户模式,程序正常 ...

  8. YTU 2602: 熟悉题型——类设计( 矩形类定义【C++】)

    2602: 熟悉题型--类设计( 矩形类定义[C++]) 时间限制: 1 Sec  内存限制: 128 MB 提交: 183  解决: 119 题目描述 定义一个矩形类,数据成员包括左下角和右上角坐标 ...

  9. STL笔记(2) STL之父访谈录

    年3月,dr.dobb's journal特约记者, 著名技术书籍作家al stevens采访了stl创始人alexander stepanov. 这份访谈纪录是迄今为止对于stl发展历史的最完备介绍 ...

  10. android 事件处理机制之requestDisallowInterceptTouchEvent

    当手指触摸到屏幕时,系统就会调用相应View的onTouchEvent,并传入一系列的action.当有多个层级的View时,在父层级允许的情 况下,这个action会一直向下传递直到遇到最深层的Vi ...