關於Easy ui 的表單驗證validate.js實時驗證


新建 validType.js文件
1.一些常用的驗證

$(function() {
    //設置text需要驗證
    $('input[type=text]').validatebox();
    //自定義validator.js
    //擴展easyui表單的驗證
    $.extend($.fn.validatebox.defaults.rules, {


        //1.驗證漢字
        CHS: {
            validator: function(value) {
                return /^[\u4e00-\u9fa5]+$/.test(value);
            },
            message: '只能輸入漢字!'
        },


        //2.移動手機號碼驗證
        mobile: { //value值為文本框中的值
            validator: function(value) {
                var reg = /^1\d{10}$/;
                return reg.test(value);
            },
            message: '手機號碼格式不正確!'
        },


        //3.電話號碼驗證

        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: '電話號碼格式不正確!'
        },



        //4.驗證IP

        ip: { // 驗證IP地址
            validator: function(value) {
                return /\d+\.\d+\.\d+\.\d+/.test(value);
            },
            message: 'IP地址格式不正確!'
        },



        // 5.驗證姓名,可以是中文或英文

        name: {
            validator: function(value) {
                return /^[\u4e00-\u9fa5]+$/i.test(value) || /^\w+[\w\s]+\w+$/i.test(value);
            },
            message: '請輸入姓名'
        },


        // 6.驗證用戶名,可以是中文或英文
        username: { // 驗證用戶名
            validator: function(value) {
                return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
            },
            message: '用戶名不合法(字母開頭,允許6-16字節,允許字母數字下划線)'
        },



        // 7.驗證日期
        date: { // 驗證日期
            validator: function(value) {
                //格式yyyy-MM-dd或yyyy-M-d
                return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
            },
            message: '清輸入合適的日期格式'
        },



        // 8.驗證英語

        english: { // 驗證英語
            validator: function(value) {
                return /^[A-Za-z]+$/i.test(value);
            },
            message: '請輸入英文'
        },


        //9.國內郵編驗證
        zipcode: {
            validator: function(value) {
                var reg = /^[1-9]\d{5}$/;
                return reg.test(value);
            },
            message: '郵編必須是非0開始的6位數字.'
        },

        // 10.驗證身份證
        idcard: { // 驗證身份證
            validator: function(value) {
                return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
            },
            message: '身份證號碼格式不正確!'
        },

        // 11.驗證最小長度
        minLength: {
            validator: function(value, param) {
                return value.length >= param[0];
            },
            message: '請輸入至少(2)個字符.'
        },

        // 12.驗證整數還是小數
        intOrFloat: { // 驗證整數或小數
            validator: function(value) {
                return /^\d+(\.\d+)?$/i.test(value);
            },
            message: '請輸入數字,並確保格式正確'
        },

        // 13.驗證QQ
        qq: { // 驗證QQ,從10000開始
            validator: function(value) {
                return /^[1-9]\d{4,9}$/i.test(value);
            },
            message: 'QQ號碼格式不正確!'
        },
        // 14.驗證整數 可正負數
        integer: { // 驗證整數 可正負數
            validator: function(value) {
                return /^[+]?[1-9]+\d*$/i.test(value);

                //return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
            },
            message: '請輸入整數'
        },

        // 15.驗證年齡
        age: { // 驗證年齡
            validator: function(value) {
                return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
            },
            message: '年齡必須是0到120之間的整數'
        },


        //16.驗證是否包含非法字符
        unnormal: { // 驗證是否包含空格和非法字符
            validator: function(value) {
                return /.+/i.test(value);
            },
            message: '輸入值不能為空和包含其他非法字符'
        },

        //17.驗證傳真
        faxno: { // 驗證傳真
            validator: function(value) {
                // return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(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: '傳真號碼不正確'
        },

        //18.驗證數字

        number: {
            validator: function(value, param) {
                return /^[0-9]+.?[0-9]*$/.test(value);
            },
            message: '請輸入數字'
        },

        //19.驗證密碼兩次的輸入是否相同
        same: {
            validator: function(value, param) {
                if ($("#" + param[0]).val() !== "" && value !== "") {
                    return $("#" + param[0]).val() == value;
                } else {
                    return true;
                }
            },
            message: '兩次輸入的密碼不一致!'
        },


        //20.驗證車牌號碼
        carNo: {
            validator: function(value) {
                $(this).css("text-transform","uppercase");
                return /^[冀豫雲遼黑湘皖魯蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊渝京津滬新京軍空海北沈蘭濟南廣成使領A-Z]{1}[A-Z0-9]{5}[A-Z0-9掛學警港澳]{1}$/i.test(value);
            },
            message: '車牌號碼格式不正確!'
        },


        //21.用戶賬號驗證(只能包括 _ 數字 字母)
        account: { //param的值為[]中值
            validator: function(value, param) {
                if (value.length < param[0] || value.length > param[1]) {
                    $.fn.validatebox.defaults.rules.account.message = '用戶名長度必須在' + param[0] + '至' + param[1] + '范圍';
                    return false;
                } else {
                    if (!/^[\w]+$/.test(value)) {
                        $.fn.validatebox.defaults.rules.account.message = '用戶名只能數字、字母、下划線組成.';
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            message: ''
        },


        //22.身份證件號碼驗證(簡易版)
        idnumber: {
            validator: function(value) {
                return /^[+]?[1-9]+\d*$/i.test(value);

                //return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
            },
            message: '身份證件號碼格式不正確!'
        },

        //23.車架號驗證
        VIN: {
            validator : function(value) {
                $(this).css("text-transform","uppercase");
                return /^[A-Z\d]{17}$/i.test(value);
            },
            message: '車架號格式不正確!'
        },

        //24.發動機號驗證
        engineNo: {
            validator: function(value) {
                $(this).css("text-transform","uppercase");
                return /^[A-Z\d-]{6,20}$/i.test(value);   //沒查到具體格式,暫定6到20位
            },
            message: '發動機號格式不正確!'
        },

        //25.SIM卡卡號驗證
        iccid: {
            validator: function(value) {
                $(this).css("text-transform","uppercase");
                return /^89860[013]{1}[A-Z\d]{14}$/i.test(value);
            },
            message: 'SIM卡號格式不正確!'
        }
    });
});
View Code

 

2.Easyui 在Jsp頁面的應用

 <tr style="height:40px">
                    <td style="text-align: center;width:25%">車牌:&nbsp;</td>
                    <td style="text-align: center;width:75%"><input name="chepai" type="text" placeholder="請輸入車牌(如蘇K88888)" class="easyui-validatebox span2" style="width:96%;" data-options="required:true,validType:'carNo'" /></td>
                </tr>
                <tr style="height:40px">
                    <td style="text-align: center">車架號:&nbsp;</td>
                    <td style="text-align: center"><input name="chejiahao" type="text" placeholder="請輸入車架號(17位,字母或數字)" class="easyui-validatebox span2" style="width:96%;" data-options="required:true,validType:'VIN'" /></td>
                </tr>
                <tr style="height:40px">
                    <td style="text-align: center">發動機號:&nbsp;</td>
                    <td style="text-align: center"><input name="fadongjihao" type="text" placeholder="請輸入發動機號(字母、數字或特殊符號)" class="easyui-validatebox span2" style="width:96%;" data-options="required:true,validType:'engineNo'" /></td>
                </tr>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM