本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于
Tooltip(提示框)组件。

一. 加载方式
//class 加载方式
<input id="email" class="easyui-validatebox"
data-options="required:true,validType:'email'" />
//JS 加载调用
$('#email').validatebox({
required : true,
validType : 'email',
});

二. 属性列表

//属性设置
$('#email').validatebox({
required : true,
validType : 'email',
//validType : 'url',
//validType : 'length[2,20]',
//validType : ['email', 'length[10,20]'],
//validType : 'remote["content.php", "username"]',
//delay : 3000,
missingMessage : '请填写电子邮件',
invalidMessage : '电子邮件格式不正确',
tipPosition : 'right',
deltaY : 120,
novalidate : true,
});

//Ajax 远程验证
if ($_POST['username'] == 'Lee') {
echo 'true';
} else {
echo 'false';
}

三. 方法列表

//销毁组件
$('#email').validatebox('destroy');
//验证码文本框是否有效

console.log($('#email').validatebox('validate'));
//返回验证的结果
console.log($('#email').validatebox('isValid'));
//禁用和启用
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
PS:我们可以使用$.fn.validatebox.defaults 重写默认值对象。

四. 自定义验证

我们可以使用重写默认规则的方式来创建一个新的规则。
//新增一个规则
$.extend($.fn.validatebox.defaults.rules, {
minLength : {
validator : function (value, param) {
return value.length >= param[0];
},
message : '请长度不小于{0}的字符',
},
});
//调用
$('#email').validatebox({
required : true,
validType : 'minLength[5]',
});

三.方法列表

//销毁组件
$('#email').validatebox('destroy');
//验证码文本框是否有效

console.log($('#email').validatebox('validate'));
//返回验证的结果
console.log($('#email').validatebox('isValid'));
//禁用和启用
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
PS:我们可以使用$.fn.validatebox.defaults 重写默认值对象。

四.自定义验证

我们可以使用重写默认规则的方式来创建一个新的规则。
//新增一个规则
$.extend($.fn.validatebox.defaults.rules, {
minLength : {
validator : function (value, param) {
return value.length >= param[0];
},
message : '请长度不小于{0}的字符',
},
});
//调用
$('#email').validatebox({
required : true,
validType : 'minLength[5]',
});

ValidateBox( 验证框) 组件的更多相关文章

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

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

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

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

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

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

  4. JQuery EasyUI validatebox(验证框)

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

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

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

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

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

  7. EasyUI Validatebox 验证框

    转自:http://www.jeasyui.net/plugins/167.html 通过 $.fn.validatebox.defaults 重写默认的 defaults. 验证框(validate ...

  8. easyui -validatebox 验证框加载

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

  9. easyUI之validatebox验证框

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

随机推荐

  1. JDK环境变量配置及Tomcat安装服务

    1.测试jdk安装是否成功: 在cmd中输入java -version 2.环境变量: 1)新建系统变量JAVA_HOME,如:D:\Program Files\Java\jdk1.8.0_60 2) ...

  2. 13 hbase连接

    Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...

  3. Mybatis的学习总结(一)——使用配置文件实现增删改查

    在使用Mybatis作为持久层来进行操作数据库,有很多的操作都是一样的,基本上都是先得到session,然后调用session提供的相关方法进行操作,接着提交session,最后关闭session.那 ...

  4. SQL Server 2008 查询所有用户表

    SQL Server 2008 查询所有用户表的T-SQL语句是: SELECT * FROM sysobjects WHERE [xtype] = 'U' 或者是: SELECT * FROM sy ...

  5. ebay如何确定同一电脑登陆了多个账号,以及同一账号登陆过多台电脑

    转自hilton 的BLOG http://jimqu.blog.51cto.com/105370/654691 一切要从ebay的买家保护说起 ebay作为一个电子商务平台,之所以可以汇聚如此众多的 ...

  6. macbook air 安装win7系统时,到最后一步要进入win7,需要给PC设置一个用户名,键盘没反应

    从 bootcamp安装:1.一定要同时选中第一项 制作usb安装盘和第二项 从网上下载最新的windows支持软件,2.然后再选第三项 安装winDows,3.当进入安装界面时选择你要安装的boot ...

  7. HBase笔记--编程实战

    HBase总结:http://blog.csdn.net/lifuxiangcaohui/article/details/39997205  (very good) Spark使用Java读取hbas ...

  8. 关于Bayes网络新解

    经典贝叶斯网络 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.目前研究较多的贝叶斯分类器主要有四种 ...

  9. mysql 查询每个分组前N条记录

    mysql 查询每个分组前N条记录 假设存在表movie,  有字段 id, part(地区), mcount(观看次数) 现查询每个地区观看次数最多的3部movie, 则表 ###id虽未存在gro ...

  10. 为ownCloud配置SSL连接

    为ownCloud配置SSL连接 在你开始使用ownCloud之前,强烈建议你在ownCloud中启用SSL支持.使用SSL可以提供重要的安全好处,比如加密ownCloud流量并提供适当的验证.在本教 ...