jquery驗證表單中的單選與多選實例_jquery

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

看到上面網頁沒？業務辦理管道下的多選必須要選中一個，怎麼辦？如果一個都沒有選中，在表單提交的時候我們就要去提示錯誤訊息，，，。大家都知道jquery驗證input是非常簡單的，卻很少要去驗證多選或單選，而且還是一組組的驗證，是分了組的，並非頁面上的所有！ ！怎麼辦呢？

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

先來看一下，沒有選取的效果，我們應該是這樣：

假設選取了一個，提示訊息馬上消失，如下圖：

其實這個可以用jsmap實現 也就是用js模擬map來做。以下的程式碼是公用的，以後遇到這種情況，直接把下面js程式碼拷入，做一下設定就可以實現了。

用下面的程式碼，你必須引入jquery驗證的js

程式碼如下：

首先，把下面的js程式碼放入你的js檔案裡，或是頁面中:

複製程式碼 程式碼如下:

/**
* 数组存储器 主要是为了方便juery验证chckbox而设计                   数组存储器，配置对象，为验证checkbox 和单选。
* 私有变量区定义数组
* 然后把每一个数组配置到setting里面，这样这个数组就存在于存储器中
* 在应用的时候用数组名即可方便地操作和得到不同的数组。
* 当你需要某个数组的时候，如果你只操作一个数组那这个方法是多于的，但如果你操作多个数组或只有数组名的情况下，这个存储器就很有用。
* @author 电子科大科园 庄濮向
* @return 数组存储器对象
*/
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 {

        //通过数组名得到数组织
        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;
}
}
},
//删除指定数组中的某一个元素
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);
}
}

                                                                                                                                                   for (var pushArr_i = 0, pushArr_len = setting.length; pushArr_i < pushArr_len; pushArr_i ) {
                                                                                                                                         }
}
}
}

} ());


/**
*The click event of the check box or radio is applied to the above map
* @author Zhuang Puxiang, University of Electronic Science and Technology of China

* @return array memory object

*/

function chk(event, arrName) {

if (event.checked == true) {
//Add an element to the array named arrName
MapArr.pushArr(arrName, event.value);
} else {
            //Remove an element from the array named arrName
       MapArr.delArr(arrName, event.value);

   }

var checkInput = document.getElementById(arrName);

if (MapArr.getArr(arrName)[0] == 'undefined' || MapArr.getArr(arrName)[0] == null) {
                                                                                                   checkInput.value = null; //Give him the value of this array. In this case, it has the effect of verification
} else {
} checkInput.value = MapArr.getArr(arrName)[0];

}

//How to make the prompt information appear after adding the value Disappear?
if (!$("#form1").valid()) return false; //Just to make this chapter expand and disappear, so don't run the submitted check, it will affect the display of the chapter
}


Two: Add an input after the group of titles of the multi-select or single-select you need to verify:




Copy Code

The code is as follows:

3: Add events to your checkbox or radio tag:

Copy code

The code is as follows:

onclick="chk(this,'BAC')" Four: Consistency: The input in "two" is used for prompt information, so your id and name must be there, and the names must be consistent, as above: id= "BAC", name="BAC", after the input is written, when adding the event, your second parameter must have the same name as the id of the input, and it must also be BAC;

Five: Configuration, once the face is ready, it is the core configuration. Where to configure this configuration, it is in the js code I asked you to introduce above. onclick="chk(this,'BAC')" is to add an event to each check or radio selection. It also means that this check should be applied to the BAC array, so we go to the setting Configure an array.

Add an array to MapArr:

Copy code

The code is as follows:

var BAC =[];Add an object to the setting of MapArr:

Copy the code

The code is as follows :

　｛　key:"BAC",　value:BAC ｝

Be sure to ensure consistency, otherwise it will not succeed .
Key points: The id of input is consistent with the second parameter of onclick. The variable name of the array variable added in MapArr is consistent with the id of input. The value of key in setting is consistent with the id of input. The value of value in setting is you. This array is configured. Okay, now you can implement verification.