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

                }
            }
        },
        //向某一个数组中添加一个元素
        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的值是你配置的这个数组。好啦,现在就可以实现验证了。

时间: 2024-09-24 01:50:36

jquery验证表单中的单选与多选实例_jquery的相关文章

jQuery对下拉框,单选框,多选框的操作

  这篇文章主要介绍了jQuery对下拉框,单选框,多选框的操作需要的朋友可以过来参考下,希望对大家有所帮助 下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的值 var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选

jquery序列化表单以及回调函数的使用示例_jquery

在开发项目中,将前台的值传给后台,有时的JSP表单中的值有一两个,也有全部的值,如果这时一个个传,必定不是很好的办法,所以使用jQuery提供的表单序列化方法,可以很好的解决这个问题,同时可以封装成通用的函数,执行成功可以调用各自的回调函数,实现各自的功能. 代码如下: function queryUserInfo(actionUrl,formId,fun){ var params=new Object(); //声明数组 $.each($("#"+formId).serializeA

jquery控制表单输入框显示默认值的方法_jquery

本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)

jquery获取form表单input元素值的简单实例_jquery

一般取值方法 $("#id").val(); $("#id").attr("value");  //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sa

jQuery验证元素是否为空的两种常用方法_jquery

本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给大家供大家参考.具体如下: 下面提供了两种方法用于检查指定id的元素的内容是否为空 // 方法一 if (!$('#jb51').html()) { //http://www.jb51.net 什么都没有找到; } // 方法二 if ($('#jb51').is(":empty")) { //http://www.jb51.net 什么都没有找到; } 希望本文所述对大家的jQuery程序设计有所帮助. 以上是小编为您精

jquery验证手机号码、邮箱格式是否正确示例代码_jquery

复制代码 代码如下: //jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == "") { //$("#confirmMsg").html("<font color='red'>邮箱地址不能为空!</font>"); alert("邮箱不能为空!") $("#email").focus(

jQuery EasyUI API 中文帮助文档和扩展实例_jquery

下载地址:jQuery EasyUI API 中文帮助文档 1.validatebox验证和提示框扩展: //弹框 $.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); } }); //扩展validatebox,添加验证 $.extend($.fn.validatebox.defaults.rules, { eqPwd: { validator: function (va

jquery插件方式实现table查询功能的简单实例_jquery

1. 写插件部分,如下: ;(function($){ $.fn.plugin = function(options){ var defaults = { //各种属性,各种参数 } var options = $.extend(defaults, options); this.each(function(){ //功能代码 var _this = this; }); } })(jQuery); 附上一个例子: ;(function($){ $.fn.table = function(optio

jQuery使用ajax跨域获取数据的简单实例_jquery

jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",