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

---

案例

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

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