easyUI 插件写法 ---Validatebox 插件为例

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);
});
}
});

[b]案例

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

// 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" />