Single-select and multiple-select examples in jquery validation forms

Single-select and multiple-select examples in jquery validation forms_jquery

WBOY

Release： 2016-05-16 17:25:15

Original

888 people have browsed it

For example, among the following options, we require those with * to be selected, see the picture:

Single-select and multiple-select examples in jquery validation forms_jquery

Have you seen the page above? I have to select one of the multiple selections under the business processing channel. What should I do? If none is selected, we will prompt an error message when the form is submitted. Everyone knows that jquery input verification is very simple, but it is rarely necessary to verify multiple selections or single selections. Moreover, it is a group verification, which is divided into groups, not all on the page! ! What to do?

Is it okay to use something else instead of jquery? Can! ! ! But we still use jquery to implement it.

Let’s take a look first. The effect without selection should look like this:

Single-select and multiple-select examples in jquery validation forms_jquery

Assuming one is selected, the prompt message will disappear immediately, as shown below:

Single-select and multiple-select examples in jquery validation forms_jquery

In fact, this can be achieved using jsmap, that is, using js to simulate map. The following code is public. If you encounter this situation in the future, just copy the following js code and make some configurations to achieve it.

Use the following code, you must introduce jquery verification js

The code is as follows:

First, put the following js code into your js file or page:

Copy the code Code As follows:

/**
* 数组存储器主要是为了方便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 = settings.length; PushArr_i < PushArr_len; PushArr_i ) {

}
}
}

} ());

/**
*チェックボックスまたはラジオのクリックイベントが上のマップに適用されます
* @author Zhuang Puxiang、中国電子科学技術大学

* @return array memory object

function chk(event, arrName) {

if (event.checked == true) {
//arrName という名前の配列に要素を追加します
MapArr.pushArr(arrName,event.value);
} else {
/ /arrName
という名前の配列から要素を削除します。 MapArr.delArr(arrName,event.value);

}

var checkInput = document.getElementById(arrName);

if (MapArr.getArr(arrName)[0] == '未定義' || MapArr.getArr(arrName)[0] == null) {
checkInput.value = null; // 彼にこの配列の値を与えます。。この場合、検証の効果があります
} else {
} checkInput.value = MapArr.getArr(arrName)[0];

}

//プロンプト情報を表示する方法値を追加すると消えますか？
if (!$("#form1").valid()) return false; //この章を展開して非表示にするだけなので、送信されたチェックは実行しないでください。章の表示に影響します
}

2: 検証する必要がある複数選択または単一選択のタイトルのグループの後に入力を追加します:

コードをコピー

コードは次のとおりです:

3: チェックボックスまたはラジオタグにイベントを追加します:

コードをコピー

コードは次のとおりです。

onclick="chk(this,'BAC ')" 4: 一貫性: 「2」の入力はプロンプト情報に使用されるため、ID と名前が存在する必要があり、上記のように名前が一貫している必要があります: id= " BAC", name="BAC"、入力が書き込まれた後、イベントを追加するとき、2 番目のパラメーターは入力の ID と同じ名前を持つ必要があり、また BAC である必要があります。

5: 構成。顔の準備ができたら、それがコア構成です。この構成をどこで構成するかは、上で紹介するようにお願いした JS コード内にあります。 onclick="chk(this,'BAC')" は、各チェックまたは無線選択にイベントを追加することを意味します。これは、このチェックを BAC アレイに適用する必要があることも意味するため、[アレイの構成] 設定に進みます。

MapArr に配列を追加します:

コードをコピーします

コードは次のとおりです:

var BAC =[];MapArr の設定にオブジェクトを追加します:

コードをコピーします

コードは次のとおりです:

｛ key:"BAC", value:BAC ｝

必ず整合性を確保してくださいそうしないと成功しません。 
 重要な点: onclick の第 2 パラメータの id と一致する MapArr で追加された配列変数の変数名と input の id が一致する 設定の key の値が input の id と一致する。設定の value の値は、この配列が構成されています。さて、これで検証を実装できるようになりました。 