easyui 經常使用字段驗證擴展

//EASyui擴展
$.extend($.fn.validatebox.defaults.rules, {
//移動手機號碼驗證
    mobile: {//value值爲文本框中的值
        validator: function (value) {
            var reg = /^1[3|4|5|8|9]\d{9}$/;
            return reg.test(value);
        },
        message: '輸入手機號碼格式不許確.'
       },
  //驗證郵編 
  zipcode: {
        validator: function (value) {
            var reg = /^[1-9]\d{5}$/;
            return reg.test(value);
        },
        message: '郵編必須是非0開始的6位數字.'
    },
idcard : {// 驗證身份證
        validator : function(value) {
            return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
        },
        message : '身份證號碼格式不正確'
    },
 
phone : {// 驗證電話號碼
        validator : function(value) {
            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
        },
        message : '格式不正確,請使用下面格式:020-88888888'
    },
 
msn:{
        validator : function(value){
        return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
    },
    message : '請輸入有效的msn帳號(例：
},
 
qq : {// 驗證QQ,從10000開始
        validator : function(value) {
            return /^[1-9]\d{4,9}$/i.test(value);
        },
        message : 'QQ號碼格式不正確'
    },
 
integer : {// 驗證整數
        validator : function(value) {
            return /^[+]?[1-9]+\d*$/i.test(value);
        },
        message : '請輸入整數'
    },
 
faxno : {// 驗證傳真
        validator : function(value) {
            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
        },
        message : '傳真號碼不正確'
    },
 
enstr : {// 驗證之只能輸入英文
        validator : function(value) {
            return /^([u4e00-u9fa5]|[ufe30-uffa0]|[a-za-z0-9_])*$/i.test(value);
        },
        message : '只能輸入英文'
    },
 
zhstr : {// 驗證之只能輸入中文
        validator : function(value) {
            return /^[u4E00-u9FA5]+$/i.test(value);
        },
        message : '只能輸入中文'
    },
 
//時間區間驗證
 
    isAfter: {
    validator: function(value, param){
        var dateA = $.fn.datebox.defaults.parser(value);
        var dateB = $.fn.datebox.defaults.parser($(param[0]).datebox('getValue'));
        return dateA>new Date() && dateA>dateB;
    },
    message: '結束時間不能小於開始時間'
    } ,
    isLaterToday: {
    validator: function(value, param){
        var date = $.fn.datebox.defaults.parser(value);
        return date>new Date();
    },
    message: '開始時間不能小於今天'
    }
 
 
//ajax 驗證惟一性
 
 Unique_validation: { 
            validator: function(value, param) {
                var m_reg = new RegExp(param[0]); //傳遞過來的正則字符串中的"\"必須是"\\" 
                if (!m_reg.test(value)) { 
                    $.fn.validatebox.defaults.rules.Unique_validation.message = param[1]; 
                    return false; 
                }else{ 
                    var postdata = {}; 
                    postdata[param[3]] = value; 
                    var result = $.ajax({ 
                        url: param[2], 
                        data: postdata, 
                        async: false, 
                        type: "post" 
                    }).responseText; 
                    if (result == "false") { 
                        $.fn.validatebox.defaults.rules.Unique_validation.message = param[4]; 
                        return false; 
                    }else{ 
                        return true; 
                    } 
                } 
            }, 
            message: '' 
        }
})

 

 

時間區間用法：

<input id="A" class="easyui-datebox" validType="isAfter['#B']"/>
 
<input id="B" class="easyui-datebox" validType="isLaterToday"/>

 

ajax用法：

 

驗證手機號惟一

 

1.數據庫設計時mobile字段使用惟一鍵（UNIQUE）

 

2.前端用法

 

<input type="text" name="user_name" id="username" class="easyui-validatebox" required="true" validType="Unique_validation[/^1[3|4|5|8|9]\d{9}$/,'輸入手機號碼格式不許確','Member/Index/checkusername','name','該手機號已經存在']" missingMessage="請輸入手機！"/>

 

 

Unique_validation 有5個參數

 

第一個參數：JS正則表達式 ，第二個：正則驗證返回的錯誤提示，第三個參數：服務器端驗證URL，第四個參數：post傳遞的參數，第五個服務器端驗證返回的無錯提示

 

說明：第一個參數不須要用單引號引發來,EASYUi 中有默認的AJAX遠程驗證方法，用法：

 

<input type="text"name="user_name" validtype="remote['url'，'name']"invalidMessage="用戶名已存在"/>這個用法有一點很差就是每輸入一次就會發送數據到服務器驗證一次，並且這個方法最很差的地方就是不能驗證 字段的格式是否正確，而EASYUI 中的validatebox不能組合驗證（既要驗證格式是否正確，又要驗證是否惟一），而上面那個AJAX擴展就能作到。