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


Posted in Javascript onAugust 18, 2013

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

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);
                        }
                    }
                }
            }
        },
        //向某一个数组中添加一个元素
        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);
                }
            }
        }
    }
} ());

/**
*复选框或单选的点击事件 应用到了上面的map
* @author 电子科大科园 庄濮向
* @return 数组存储器对象
*/
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] == 'undefined' || MapArr.getArr(arrName)[0] == null) {
        checkInput.value = null; //把这个数组的值给他。 这样的话,就起到了验证的效果
    } else {
        checkInput.value = MapArr.getArr(arrName)[0];
    }
    //如何让提示信息在加入值过后就消失掉?
    if (!$("#form1").valid()) return false; //只是为了让这一章展开的消失,所以千万不要去运行提交的那个check,会影响章节的显示
}

二:在你需要验证的多选或单选的那一组标题后面加入一个input:
<input id="BAC" name="BAC" type="text"  style="width:0;height:0;border:0" class="required" />

三:在你的checkbox或是radio标签内加入事件:
onclick="chk(this,'BAC')"

四:一致性:在"二"中的那个input是用来作提示信息的,所以你的id 和name 一定要有,且名字要一致,如上就是:id="BAC", name="BAC" ,input写好过后,在加入事件的时候,你第二个参数要与input的id同名,也要是BAC;

五:配置,面子做好了,就是核心的配置了,这个配置在哪儿配呢,就是叫你引入的我上面的js代码中。onclick="chk(this,'BAC')",是给每一个复选或单选加事件,同时还有一个意思,说明要把这个复选应用到BAC这个数组中,所以,我们去setting中配置一个数组。

在MapArr中加入一个数组:

var BAC=[];

在MapArr的setting中加入一个对象:
{


key:"BAC",


value:BAC
  }

千万要保证一致性,不然不会成功。

重点:input的id同onclick的第二个参数一致 MapArr中加入的数组变量的变量名与input的id一致,setting中的key的值同input的id一致 setting 中的value的值是你配置的这个数组。好啦,现在就可以实现验证了。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
玩转方法:call和apply
May 08 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
JS+CSS实现一个气泡提示框
Aug 18 #Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 #Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 #Javascript
JS通过相同的name进行表格求和代码
Aug 18 #Javascript
复选框全选与全不选操作实现思路
Aug 18 #Javascript
将文本输入框内容加入表中的js代码
Aug 18 #Javascript
js css后面所带参数含义介绍
Aug 18 #Javascript
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jQuery cdn使用介绍
2013/05/08 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python标准库与第三方库详解
2014/07/22 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python计算auc指标实例
2017/07/13 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
英语辞职信范文
2015/02/28 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书