欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2013年08月18日 16:41:33   作者:  
這里所說的,用jquery去驗(yàn)證某一組多選至少要有一個(gè)選中,某一組單選至少有一個(gè)選中,,大家都知道單一的一個(gè)用js比較好驗(yàn)證,但是想要用jquery的驗(yàn)證并且用到j(luò)query驗(yàn)證的提示信息,那么這就不好辦了

例如下的選項(xiàng)中,我們要求帶*的是必選的,看圖:

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

不用jquery用其他的,可以嗎?可以?。。〔贿^我們還是用jquery來實(shí)它。

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

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

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

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

代碼如下:

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

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

/**
* 數(shù)組存儲器 主要是為了方便juery驗(yàn)證chckbox而設(shè)計(jì)                   數(shù)組存儲器,配置對象,為驗(yàn)證checkbox 和單選。
* 私有變量區(qū)定義數(shù)組
* 然后把每一個(gè)數(shù)組配置到setting里面,這樣這個(gè)數(shù)組就存在于存儲器中
* 在應(yīng)用的時(shí)候用數(shù)組名即可方便地操作和得到不同的數(shù)組。
* 當(dāng)你需要某個(gè)數(shù)組的時(shí)候,如果你只操作一個(gè)數(shù)組那這個(gè)方法是多于的,但如果你操作多個(gè)數(shù)組或只有數(shù)組名的情況下,這個(gè)存儲器就很有用。
* @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ù)組中的某一個(gè)元素
        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);
                        }
                    }

                }
            }
        },
        //向某一個(gè)數(shù)組中添加一個(gè)元素
        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ù)組中添加一個(gè)元素
        MapArr.pushArr(arrName, event.value);
    } else {
        //在名為arrName的數(shù)組中去除一個(gè)元素
        MapArr.delArr(arrName, event.value);
    }

    var checkInput = document.getElementById(arrName);

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


二:在你需要驗(yàn)證的多選或單選的那一組標(biāo)題后面加入一個(gè)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')"

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

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

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

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

  var BAC=[];

在MapArr的setting中加入一個(gè)對象:
復(fù)制代碼 代碼如下:

  {
    key:"BAC",
    value:BAC
  }

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

相關(guān)文章

最新評論