jquery驗(yàn)證表單中的單選與多選實(shí)例

更新時間：2013年08月18日 16:41:33 作者：

這里所說的，用jquery去驗(yàn)證某一組多選至少要有一個選中，某一組單選至少有一個選中，，大家都知道單一的一個用js比較好驗(yàn)證，但是想要用jquery的驗(yàn)證并且用到j(luò)query驗(yàn)證的提示信息，那么這就不好辦了

例如下的選項中，我們要求帶*的是必選的，看圖：

看到上面網(wǎng)頁沒？業(yè)務(wù)辦理渠道下的多選必須要選中一個，怎么辦？如果一個都沒有選中，在表單提交的時候我們就要去提示錯誤信息，，，。大家都知道jquery驗(yàn)證input是非常簡單的，卻很少要去驗(yàn)證多選或單選，而且還是一組組的驗(yàn)證，是分了組的，并非頁面上的所有??！怎么辦呢？

不用jquery用其他的，可以嗎？可以?。?！不過我們還是用jquery來實(shí)它。

先來看一下，沒有選中的效果，我們應(yīng)該是這樣：

假設(shè)選中了一個，提示信息馬上消失，如下圖：

其實(shí)這個可以用jsmap來實(shí)現(xiàn) 也就是用js模擬map來做。以下的代碼是公用的，以后遇到這種情況，直接把下面js代碼拷入，做一下配置就可以實(shí)現(xiàn)了。

用下面的代碼，你必須要引入jquery驗(yàn)證的js

代碼如下：

首先，把下面的js代碼放入你的js文件里，或是頁面中:

復(fù)制代碼代碼如下:

/**
* 數(shù)組存儲器主要是為了方便juery驗(yàn)證chckbox而設(shè)計數(shù)組存儲器，配置對象，為驗(yàn)證checkbox 和單選。
* 私有變量區(qū)定義數(shù)組
* 然后把每一個數(shù)組配置到setting里面，這樣這個數(shù)組就存在于存儲器中
* 在應(yīng)用的時候用數(shù)組名即可方便地操作和得到不同的數(shù)組。
* 當(dāng)你需要某個數(shù)組的時候，如果你只操作一個數(shù)組那這個方法是多于的，但如果你操作多個數(shù)組或只有數(shù)組名的情況下，這個存儲器就很有用。
* @author 電子科大科園莊濮向
* @return 數(shù)組存儲器對象
*/
var MapArr = (function () {

    var BHC = [], BCC = [], BQC = [], IC = [];
    var BAC = [];
    var BUC = [];

    var setting = [
            {
                key: "BHC",
                value: BHC
            },
            {
                key: "BAC",
                value: BAC

}, { key: "BUC", value: BUC }, { key: "BCC", value: BCC }, { key: "BQC", value: BQC }, {key:"IC",value:IC}
];

return {

        //通過數(shù)組名得到數(shù)組織
        getArr: function (arr_name) {
            for (var setting_i = 0, setting_len = setting.length; setting_i < setting_len; setting_i++) {
                if (setting[setting_i].key == arr_name) {
                    return setting[setting_i].value;
                }
            }
        },
        //刪除指定數(shù)組中的某一個元素
        delArr: function (arr_name, elementValue) {
            for (var delArr_i = 0, delArr_len = setting.length; delArr_i < delArr_len; delArr_i++) {
                if (setting[delArr_i].key == arr_name) {
                    for (var arr_i = 0, arr_len = setting[delArr_i].value.length; arr_i < arr_len; arr_i++) {
                        if (setting[delArr_i].value[arr_i] == elementValue) {
                            setting[delArr_i].value.splice(arr_i, 1);
                        }
                    }

                }
            }
        },
        //向某一個數(shù)組中添加一個元素
        pushArr: function (arr_name, elementValue) {
            for (var pushArr_i = 0, pushArr_len = setting.length; pushArr_i < pushArr_len; pushArr_i++) {
                if (setting[pushArr_i].key == arr_name) {
                    setting[pushArr_i].value.push(elementValue);
                }
            }
        }
    }

} ());

/**
*復(fù)選框或單選的點(diǎn)擊事件應(yīng)用到了上面的map
* @author 電子科大科園莊濮向
* @return 數(shù)組存儲器對象
*/
function chk(event, arrName) {

    if (event.checked == true) {
        //向名為arrName的數(shù)組中添加一個元素
        MapArr.pushArr(arrName, event.value);
    } else {
        //在名為arrName的數(shù)組中去除一個元素
        MapArr.delArr(arrName, event.value);
    }

    var checkInput = document.getElementById(arrName);

    if (MapArr.getArr(arrName)[0] == 'undefined' || MapArr.getArr(arrName)[0] == null) {
        checkInput.value = null; //把這個數(shù)組的值給他。這樣的話，就起到了驗(yàn)證的效果
    } else {
        checkInput.value = MapArr.getArr(arrName)[0];
    }
    //如何讓提示信息在加入值過后就消失掉？
    if (!$("#form1").valid()) return false; //只是為了讓這一章展開的消失，所以千萬不要去運(yùn)行提交的那個check,會影響章節(jié)的顯示
}

二：在你需要驗(yàn)證的多選或單選的那一組標(biāo)題后面加入一個input:

復(fù)制代碼代碼如下:

<input id="BAC" name="BAC" type="text"  style="width:0;height:0;border:0" class="required" />

三：在你的checkbox或是radio標(biāo)簽內(nèi)加入事件：

復(fù)制代碼代碼如下:

onclick="chk(this,'BAC')"

四：一致性：在"二"中的那個input是用來作提示信息的，所以你的id 和name 一定要有，且名字要一致，如上就是：id="BAC", name="BAC" ,input寫好過后，在加入事件的時候，你第二個參數(shù)要與input的id同名，也要是BAC;

五：配置，面子做好了，就是核心的配置了，這個配置在哪兒配呢，就是叫你引入的我上面的js代碼中。onclick="chk(this,'BAC')"，是給每一個復(fù)選或單選加事件，同時還有一個意思，說明要把這個復(fù)選應(yīng)用到BAC這個數(shù)組中，所以，我們?nèi)etting中配置一個數(shù)組。

在MapArr中加入一個數(shù)組:

復(fù)制代碼代碼如下:

　　var BAC=[];

在MapArr的setting中加入一個對象：

復(fù)制代碼代碼如下:

　　｛
　　　　key:"BAC",
　　　　value:BAC
  ｝

千萬要保證一致性，不然不會成功。
　　重點(diǎn)：input的id同onclick的第二個參數(shù)一致 MapArr中加入的數(shù)組變量的變量名與input的id一致，setting中的key的值同input的id一致 setting 中的value的值是你配置的這個數(shù)組。好啦，現(xiàn)在就可以實(shí)現(xiàn)驗(yàn)證了。

您可能感興趣的文章: