jquery 検証での単一選択と複数選択の例 Forms_jquery

たとえば、次のオプションのうち、* の付いたオプションを選択する必要があります。図を参照してください:

上のページをご覧になりましたか?ビジネス処理チャネルで複数の選択肢の中から 1 つを選択する必要があります。どうすればよいですか?何も選択されていない場合は、フォームの送信時にエラー メッセージが表示されます。 jQuery の入力検証は非常に簡単であることは誰もが知っていますが、複数の選択または単一の選択を検証する必要があることはほとんどありません。さらに、これはページ上のすべてではなくグループに分割されるグループ検証です。 ！何をするか？

jquery の代わりに他のものを使用しても問題ありませんか?できる！ ！ ！ただし、実装には依然として jquery を使用します。

最初に、選択されていない効果は次のようになります:

いずれか 1 つが選択されていると、以下に示すようにプロンプ​​ト メッセージがすぐに消えます:

実際、これは jsmap を使用して実現できます。つまり、js を使用してマップをシミュレートします。次のコードは公開されています。今後この状況が発生した場合は、次の 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                 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                 if (setting[delArr_i].key == arr_name) {
                    for (var arr_i = 0, arr_len = setting[delArr_i].value.length; 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                                                                                                                                          }
}
}
}

} ());


/**
*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.