jquery验证表单中的单选与多选实例

例如下的选项中,我们要求带*的是必选的,看图:

jquery验证表单中的单选与多选实例

看到上面网页没?业务办理渠道下的多选必须要选中一个,怎么办?如果一个都没有选中,在表单提交的时候我们就要去提示错误信息,,,。大家都知道jquery验证input是非常简单的,却很少要去验证多选或单选,而且还是一组组的验证,是分了组的,并非页面上的所有!!怎么办呢?

不用jquery用其他的,可以吗?可以!!!不过我们还是用jquery来实它。

先来看一下,没有选中的效果,我们应该是这样:

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);
                        }
                    }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzswd.html