转自:http://www.jeasyui.net/plugins/167.html

通过 $.fn.validatebox.defaults 重写默认的 defaults。

验证框(validatebox)是为了验证表单输入字段而设计的。如果用户输入无效的值,它将改变背景颜色,显示警告图标和提示消息。验证框(validatebox)可与表单(form)插件集成,防止提交无效的字段。

依赖

  • tooltip

用法

从标记创建验证框(validatebox)。

  1. <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

使用 javascript 创建验证框(validatebox)。

  1. <input id="vv">
  1. $('#vv').validatebox({
  2. required: true,
  3. validType: 'email'
  4. });

检查密码和重新输入密码是相同的。

  1. // extend the 'equals' rule
  2. $.extend($.fn.validatebox.defaults.rules, {
  3. equals: {
  4. validator: function(value,param){
  5. return value == $(param[0]).val();
  6. },
  7. message: 'Field do not match.'
  8. }
  9. });
  1. <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
  2. <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
  3. required="required" validType="equals['#pwd']">

验证规则

验证规则是通过使用 required 和 validType 属性来定义的,这里是已经实施的规则:

  • email:匹配 email 正则表达式规则。
  • url:匹配 URL 正则表达式规则。
  • length[0,100]:允许从 x 到 y 个字符。
  • remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。

要自定义验证规则,重写 $.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. });

现在您可以使用这个 minLength 验证类型来定义一个至少输入5个字符的输入框:

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

属性

名称 类型 描述 默认值
required boolean 定义是否字段应被输入。 false
validType string,array 定义字段的验证类型,比如 email、url,等等。可能的值:
1、验证类型字符串,应用单个验证规则。
2、验证类型数组,应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。

代码实例:

  1. <input class="easyui-validatebox" data-options="required:true,validType:'url'">
  2. <input class="easyui-validatebox" data-options="
  3. required:true,
  4. validType:['email','length[0,20]']
  5. ">
null
delay number 延迟验证最后的输入值。该属性自版本 1.3.2 起可用。 200
missingMessage string 当文本框为空时出现的提示文本。 该字段是必需的。
invalidMessage string 当文本框的内容无效时出现的提示文本。 null
tipPosition string 定义当文本框的内容无效时提示消息的位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。 right
deltaX number 在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。 0
novalidate boolean 当设置为 true 时,则禁用验证。该属性自版本 1.3.4 起可用。 false

方法

名称 参数 描述
destroy none 移除并销毁该组件。
validate none 进行验证以判定文本框的内容是否有效。
isValid none 调用 validate 方法并且返回验证结果,true 或者 false。
enableValidation none 启用验证。该方法自版本 1.3.4 起可用。
disableValidation none 禁用验证。该方法自版本 1.3.4 起可用。

EasyUI Validatebox 验证框的更多相关文章

  1. JQuery EasyUI validatebox(验证框)

    JQuery EasyUI validatebox(验证框) http://www.easyui.info/archives/602.html

  2. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  3. easyui -validatebox 验证框加载

    问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...

  4. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  5. 第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

    jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...

  6. Jquery EasyUI 中ValidateBox验证框使用讲解(转)

    Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表 ...

  7. Jquery EasyUI 中ValidateBox验证框使用讲解

    来源素文宅博客:http://blog.yoodb.com/ Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警 ...

  8. ValidateBox( 验证框) 组件

    本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id=&quo ...

  9. easyUI之validatebox验证框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. 集训第六周 数学概念与方法 数论 筛素数 H题

    Description 小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识.  问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素数,则称之为“ ...

  2. admin源码之url设计

    如何实现批量设计url? 1.创建Django项目 2.新建app01 和 app02 3.在models.py中创建模型 4.在settings.py中完成数据库配置.app配置等 5.数据库迁移 ...

  3. Jmeter&Ant构建自动化测试平台

    JMeter是一个软件,使负载测试或业绩为导向的业务(功能)测试不同的协议或技术. Apache软件基金会的Stefano Mazzocchi JMeter的最初的开发.他写道:它主要对 Apache ...

  4. 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...

  5. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  6. stl lower_bound()返回值

    http://blog.csdn.net/niushuai666/article/details/6734403 函数lower_bound()在first和last中的前闭后开区间进行二分查找,返回 ...

  7. 刺激(codevs 1958)

    题目描述 Description saffah的一个朋友S酷爱滑雪,并且追求刺激(exitement,由于刺激过度导致拼写都缺了个字母),喜欢忽高忽低的感觉.现在S拿到了一张地图,试图制定一个最长路径 ...

  8. HDU——1498 50 years, 50 colors

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  9. codevs——1031 质数环

    1031 质数环  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 一个大小为N(N<=17 ...

  10. CAS--CompareAndSwap原理

    1.CAS(Compare-and-Swap),即比较并替换,是一种实现并发算法时常用到的技术,Java并发包中的很多类都使用了CAS技术. CAS需要有3个操作数:内存地址V,旧的预期值A,即将要更 ...