easyui 的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展。

js地址:jquery-easyui-1.3.3/jeasyui-extensions/jeasyui.extensions.validatebox.js

属性

属性是定义在 jQuery.fn.{plugin}.defaults。比如,dialog 的属性是定义在 jQuery.fn.dialog.defaults。

事件

事件(回调函数)也是定义在jQuery.fn.{plugin}.defaults。

方法

调用方法的语法:$('selector').plugin('method', parameter);

其中:

  • selector 是 jquery 对象选择器。
  • plugin 是插件名称。
  • method 是与插件相匹配的已存在方法。
  • parameter 是参数对象,可以是对象、字符串...

方法是定义在jQuery.fn.{plugin}.methods。每个方法有两个参数:jq 和 param。第一个参数 'jq' 是必需的,引用 jQuery 对象。第二个参数'param' 引用方法传递的实际参数。比如,要扩展 dialog 组件的方法名为 'mymove' 的方法,代码如下:

$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});

案例

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

// extend the 'equals' rule
//demo:data-options="required:true" 或者 data-options="required:true,'equals[\'#pwd\']'"
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '两个密码不能重复'
}
});

给输入框添加ajax验证

//通过给param[2]赋值来展示展示message
//必须有return值,同时也必须是boolean值
borrowUserName:{
validator:function(value, param){
var result = false;
if(value.length >= param[0] && value.length <= param[1]){
$.ajax({
type: "POST",
url:"user.html",
dataType:"json",
data:{"username":value},
success: function(data){
result = !data;
}
});
}else{
param[2] = "请输入"+param[0]+"-"+param[1]+"位字符.";
return false;
}
param[2] = "输入的借款人用户名不存在";
return result;
},
message: "{2}"
}, //demo2;param获取传入的实际参数
zyp_remote:{
validator:function(value,param){
var flag = true;
if($(param[1]) && value == $(param[1]).val()){
param[2] = "邀请人与被邀请人不能一样";
flag = false;
return false;
}
$.ajax({
type: "POST",
async:false,
url:"/modules/checkInvitedUser.html?userName="+value +"&type="+param[0],
dataType:"json",
data:{"username":value},
success: function(data){
if(param[0] == 1 && !data.result){
param[2] = "该用户不存在";
flag = data.result;
return flag;
}else if(param[0] == 2 && !data.result){
param[2] = "该用户不存在或者已经被邀请了";
flag = data.result;
return flag;
}
}
}); return flag;
},
message: "{2}"
} //demo3;
//value为输入的值
//使用:<input type="text" name="QQNum" class="easyui-validatebox" data-options="required: true,validType:'ip'"/>
ip: {
validator: function (value) {
return $.string.isIPv4(value);
},
message: "输入的内容必须是正确的 IP地址v4 格式."
}

使用案例:[数组里面的是入参; type 1:邀请人,2:被邀请人; '#inviteName'表示获取节点]

<input type="text" name="invitedName" class="easyui-validatebox" data-options="required: true,validType:'zyp_remote[2,\'#inviteName\']'" maxlength="20"/>

多重验证使用案例[自从1.3.2版本开始,validatebox自身已经支持多重校验了]

validMobile出入的值可用在 param 中获取【传入的值可以是'#inviteName',表示获取那个输入框的值】; 输入框中的值通过value获取;

//使用:data-options="required:true,validType:['email','length[0,20]','validMobile[\'000\',\'hhhh\']']"
<input type="text" name="Demo" value="" class="easyui-validatebox" data-options="required: true,validType:['mobile','validMobile[\'000\',\'hhhh\']']" maxlength="11" />

easyUI 插件写法 ---Validatebox 插件为例的更多相关文章

  1. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

  2. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  3. JQ插件写法 扩展JQ方法

    目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...

  4. maven打包需要设置main-class的插件写法

    maven打包需要设置main-class的插件写法 <build> <plugins> <plugin> <groupId>org.apache.ma ...

  5. Vue 插件写法

    都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身.vue的 ...

  6. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  7. JQUERY EASYUI 验证框(VALIDATEBOX)用法

    Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法,下面来介绍一下验证框(ValidateBox)的详细用法(查看演示):HTML 代码 <inp ...

  8. 在NPAPI开发火狐浏览器插件在NPAPI插件

    1.插件是什么 插件是一种遵循一定规范的应用程序接口编写出来的程序.插件必须依附于一个宿主程序,为宿主程序提供增强功能.插件的种类有很多,这里主要讨论浏览器插件. IE下利用OLE和COM技术开发的浏 ...

  9. [Linux实用工具]munin-node插件配置和插件编写

    前面介绍了2篇munin使用的相关文章: [Linux实用工具]Linux监控工具munin的安装和配置 [Linux实用工具]Linux监控工具munin的展示(Nginx)   这次介绍一下mun ...

随机推荐

  1. CSDN挑战编程——《金色十月线上编程比赛第二题:解密》

    金色十月线上编程比赛第二题:解密 题目详情: 小强是一名学生, 同一时候他也是一个黑客. 考试结束后不久.他吃惊的发现自己的高等数学科目竟然挂了,于是他果断入侵了学校教务部站点. 在入侵的过程中.他发 ...

  2. HD2 Tmobile 重新分区代码(使用clk 1.6.5 de)

    fastboot oem part-resize misc: fastboot oem part-resize recovery: fastboot oem part-resize boot: fas ...

  3. 重新想象 Windows 8 Store Apps (23) - 文件系统: 文本的读写, 二进制的读写, 流的读写, 最近访问列表和未来访问列表

    原文:重新想象 Windows 8 Store Apps (23) - 文件系统: 文本的读写, 二进制的读写, 流的读写, 最近访问列表和未来访问列表 [源码下载] 重新想象 Windows 8 S ...

  4. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  5. 解决mysqldb查询大量数据导致内存使用过高的问题

    1.源码 connection=MySQLdb.connect( host="thehost",user="theuser", passwd="the ...

  6. 调用CachedRowSetImpl类时,为什么会出现这样的错误

    Access restriction: The type CachedRowSetImpl is not accessible due to restriction on required libra ...

  7. 卓尼斯ZT-180点评

    卓尼斯ZT-180点评    ——我们出差,使用10”上网本发布,没有图片.并写冲忙.遗憾的不足之处. 一.购买 1.由于旅游.不想拿那台14"笔记本,台平板电脑.当时,选择的对象有维智A8 ...

  8. MemoryBarrier,Volatile

    使用MemoryBarrier,Volatile进行同步 上一节介绍了使用信号量进行同步,本节主要介绍一些非阻塞同步的方法.本节主要介绍MemoryBarrier,volatile,Interlock ...

  9. 蓝牙4.0BLE cc2540 cc2541 ios OAD课程(空中固件升级)[原版的,多图]

           蓝牙4.0BLE cc2540 cc2541 ios OAD课程(件) 为阿莫单片机论坛  www.AmoMcu.com 原创.仅仅公布于csdn博客, 如需转载,请注明出处,谢谢!   ...

  10. Mesos-error

    1,configure: error: cannot find libcurl 解决 yum install  curl-devel 版权声明:本文博客原创文章,博客,未经同意,不得转载.