[轉]formValidator的一些驗證實例

本文轉載自查看原文 2012-03-15 15:47 26162 JavaScript

原文

http://www.cnblogs.com/talk/archive/2012/01/29/2330887.html

$( function () {
     try {
        $.formValidator.initConfig({
            formid: "formTable",
            errorfocus: false,
            submitonce: true,
            tipstyle: "both",
            onerror: function () { // 驗證不通過時的回調函數
                alert("紅色提示處輸入非法，請根據提示修改！");
            }
        });
         // 驗證字符串(必填)
        $("#name").formValidator({ // 驗證：模塊名稱
            onshow: "（必填）",
            onfocus: "（必填）不超過50個字符",
            oncorrect: "（正確）"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "（錯誤）不能為空",
            onerrormax: "（錯誤）不超過50個字符，漢字算兩個字符"
        });

         // 驗證字符串(選填)
        $("#name").formValidator({ // 驗證：模塊名稱
            onshow: "（選填）",
            onfocus: "（選填）不超過50個字符",
            oncorrect: "（正確）",
            empty: true
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "（錯誤）不能為空",
            onerrormax: "（錯誤）不超過50個字符，漢字算兩個字符"
        });

         // 驗證時間
        $("#addDate").formValidator({ // 驗證：發送時間
            onshow: "（必填）",
            onfocus: "（必填）請選擇操作時間",
            oncorrect: "（正確）"
        }).functionValidator({
            fun: function (val, elem) {
                 if (!/^\d{4}-\d{2}-\d{2}[ ]\d{2}:\d{2}$/.test(val)) {
                     return "（錯誤）請選擇操作時間";
                }
                 return true;
            }
        });

         // ajax驗證
        $("#account").formValidator({ // 驗證：模塊名稱
            onshow: "（必填）",
            onfocus: "（必填）不超過50個字符",
            oncorrect: "（正確）"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "（錯誤）不能為空",
            onerrormax: "（錯誤）不超過50個字符，漢字算兩個字符"
        }).ajaxValidator({
            type: "post",
            url: "EnterpriseManage!ajaxValidatorUserAccount.action",
            success: function (data) {
                 if (data == "0") {
                     return true;
                } else if (data == "1") {
                     return false;
                }
            },
            onerror: "該賬號已被占用，請更換！"
        });

         // 密碼及重復密碼驗證
        $("#password").formValidator({ // 驗證：模塊名稱
            onshow: "（必填）",
            onfocus: "（必填）不超過11個字符",
            oncorrect: "（正確）"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "（錯誤）不能為空",
            onerrormax: "（錯誤）不超過11個字符，漢字算兩個字符"
        });

        $("#passwordRepeat").formValidator({
            onshow: "（必填）",
            onfocus: "（必填）2次密碼必須一致",
            oncorrect: "（正確）"
        }).compareValidator({
            desid: "password",
            operateor: "=",
            onerror: "（錯誤）2次密碼不一致,請確認"
        });

         // 圖片格式驗證
        $("#tcCodeLogo").formValidator({
            onshow: "（選填）",
            onfocus: "（選填）請上傳圖片文件",
            oncorrect: "（正確）",
            empty: true
        }).regexValidator({
            regexp: regexEnum.picture,
            onerror: "只能上傳圖片文件"
        });

         // 數值驗證
        $("#nameNum").formValidator({ // 驗證：模塊名稱
            onshow: "（必填）",
            onfocus: "（必填）值1到50",
            oncorrect: "（正確）"
        }).inputValidator({
            min: 1,
            max: 50,
            type: "value",
            onerrormin: "（錯誤）不能為空",
            onerrormax: "（錯誤）值1到50"
        });
         // 電話驗證
        $("#linkPhone").formValidator({
            onshow: "（選填）",
            onfocus: "（選填）",
            oncorrect: "（正確）",
            empty: true
        }).regexValidator({
            regexp: "^(\\d{3,4}-?\\d{7,8}|(13|15|18)\\d{9})$",
            onerror: "（錯誤）電話號碼格式不正確，請檢查"
        });

         // EMail驗證
        $("#linkEmail").formValidator({
            onshow: "（選填）",
            onfocus: "（選填）請選擇正確EMail格式",
            oncorrect: "（正確）",
            empty: true
        }).regexValidator({
            regexp: regexEnum.email,
            onerror: "（錯誤）Email格式不正確，請檢查"
        });

         // select驗證
        $("#testSelect").formValidator({
            onshow: "（必填）",
            onfocus: "（必填）請選擇選項",
            oncorrect: "（正確）"
        }).inputValidator({
            min: 0,   // 開始索引
            onerror: "你是不是忘記選擇學歷了!"
        });

         // 隱藏時，默認驗證通過
        $("#smsProductName").formValidator({ // 驗證
            onshow: "（必填）",
            onfocus: "（必填）不超過50個字符，漢字算兩個字符",
            oncorrect: "（正確）"
        }).functionValidator({
            fun: function (val, elem) {
                 if ($("#smsProductName").is(":hidden")) {
                     return true;
                }
                 if (!/^\S{1,50}$/.test(val)) {
                     return "（錯誤）不超過50個字符，漢字算兩個字符";
                }
                 return true;
            }
        });
         // 多選選擇框的驗證方式略有點復雜了
        $(":checkbox[name='productType']").formValidator({
            onshow: "（至少選擇一個）",
            onfocus: "（至少選擇一個）",
            oncorrect: "（正確）"
        }).functionValidator({
            fun: function (val, elem) {
                 var objs = $(":checkbox[name='productType']");
                 for ( var i = 0; i < objs.length; i++) {
                     if ($(objs[i]).attr("checked") == true) {
                        $('#productTypeTip').removeClass();
                        $('#productTypeTip').addClass("onSuccess");
                        $('#productTypeTip').html();
                        $('#productTypeTip').html("<nobr>正確</nobr>");
                         return true;
                    }
                }
                $('#productTypeTip').removeClass();
                $('#productTypeTip').addClass("onError");
                $('#productTypeTip').html();
                $('#productTypeTip').html("<nobr>（至少選擇一項）</nobr>");
                 return false;
            }
        });
    } catch (e) {
        alert(e);
    }
});

免責聲明！

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

猜您在找 formValidator的一些驗證實例 gorm驗證實例 jQuery Ajax驗證實例 ThinkPHP 自動驗證實例 vue 表單驗證實例 js 表單驗證實例 CRF 詳細推導、驗證實例 angular表單驗證實例----可用的代碼 jQuery Validate插件驗證實例 (轉)強大的JQuery表單驗證插件 FormValidator使用介紹