Jquery.Validate验证CheckBoxList,RadioButtonList,DropDownList是否选中

最新推荐文章于 2024-06-12 19:50:00 发布
最新推荐文章于 2024-06-12 19:50:00 发布
阅读量5.4k 收藏 4
点赞数
分类专栏： Ajax/Jquery Js/VBScript 文章标签： asp textbox server function input 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/downmoon/article/details/6764887
版权

Jquery.Validate是一个相当棒的客户端验证控件，它的功能强大就不必说了，本文主要介绍了它对asp.net中三类控件CheckBoxList,RadioButtonList,DropDownList是否选中的验证，当然，服务器的验证也是必须的。

建立一个项目，结构如图：

邀月工作室

主要js如下：

<script type="text/javascript">
  
    //DropDownList验证方法
     $.validator.addMethod('selectNone',
          function(value, element) {
              return this.optional(element) ||(value!= -1);
          }, "请选择至少一项！");

    //ChekcBoxList验证方法

      /* 
     $.validator.addMethod('atLeastOneChecked', function(value, element) {
            var checkedCount = 0;
              $("input[name^='" + <%=txtHistory.UniqueID %> + "']").each(function() { 
               if ($(this).attr('checked')) { checkedCount++; } 
               });
              return checkedCount>0;
            
        },"请选择至少一项");
        */
        
        // 手机号码验证       
     $.validator.addMethod("isMobile", function(value, element) {       
         var length = value.length;   
         var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;   
         return this.optional(element) || (length == 11 && mobile.test(value));       
     }, "请正确填写您的手机号码");       
    
         $(document).ready(function () {
       
        //验证CheckBoxList
         ValidateOptions = function(sender, args) {
         args.IsValid=false;
         var len = $("#history_DIV input:checked").length;    
         args.IsValid = (len>0);
        };


        $("#form1").validate(
        {
        rules: {
            <%=txtVName.UniqueID %>: {
                required: true
            },
                <%=txtEmail.UniqueID %>: {                       
                required: true,
                email:true
            },
                <%=txtRemark.UniqueID %>: {
                    required: true
                },
                <%=txtVSex.UniqueID %>: {
                required: function(element) { 
                    return $("input:radio[name='txtVSex']:checked").val()!="";  
                    } 
                                        },
                <%=txtFrom.UniqueID %>:{
                selectNone: true
                },
                       
                <%=txtMobile.UniqueID %>:{
                required:true,
                isMobile:true
                },
                <%=txtHistory.UniqueID %>:{
                //required: function(element) { 
                //return ($("#history_DIV input:checked").length)>0;}
                //return $("#<%=txtHistory.UniqueID %> input[@type=checkbox]:checked").size()>0; 
                // return $("input[name^='<%=txtHistory.UniqueID %>']").length>0
                //atLeastOneChecked: true
                         
                }

            },
            messages: {
                    <%=txtRemark.UniqueID %>: 
                    {
                    required: "请填写报名理由"
                    },
                    <%=txtVSex.UniqueID %>: 
                    {
                    required: "请选择性别"
                    },
                           
                    <%=txtMobile.UniqueID %>:{
                    required: "请填写手机号码"
                    },
                    <%=txtHistory.UniqueID %>:{
                    required: "请选择届数"
                    }
            }           
        });
      });
    </script>

前台页面如下：

<table width="750" border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td width="150" height="40">
                真实姓名：
            </td>
            <td width="600">
                <asp:TextBox ID="txtVName" runat="Server" Width="280px" />
            </td>
        </tr>
        <tr>
            <td height="40">
                性别：
            </td>
            <td>
                <asp:RadioButtonList ID="txtVSex" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="男" Value="男"></asp:ListItem>
                    <asp:ListItem Text="女" Value="女"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
            </td>
        </tr>
        <tr>
            <td height="40">
                手机号码：<br />
            </td>
            <td>
                <asp:TextBox ID="txtMobile" runat="Server" Width="280px" />
                <span>请填写真实手机号码方便接收活动通知</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                E-Mail：<br />
            </td>
            <td>
                <asp:TextBox ID="txtEmail" runat="Server" Width="280px" CssClass="email" />
                <span>用于接收邮件通知</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                职业：<br />
            </td>
            <td>
                <asp:RadioButtonList ID="txtC_Name" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="学生" Value="1"></asp:ListItem>
                    <asp:ListItem Text="职员" Value="2"></asp:ListItem>
                    <asp:ListItem Text="经理" Value="3"></asp:ListItem>
                    <asp:ListItem Text="家庭主妇" Value="4"></asp:ListItem>
                    <asp:ListItem Text="自由职业者" Value="5"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td height="40">
                报名人数：<br />
            </td>
            <td>
                <asp:RadioButtonList ID="txtC_EName" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="就我一人" Value="1"></asp:ListItem>
                    <asp:ListItem Text="两人" Value="2"></asp:ListItem>
                    <asp:ListItem Text="三人" Value="3"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td height="40">
                报名理由:
            </td>
            <td>
                <asp:TextBox TextMode="MultiLine" Columns="50" Rows="5" ID="txtRemark" runat="Server" />
                <br />
                <span>优质理由怎么写？1.描述您为什么要申请2.描述活动那里吸引您 3.个性化自由发挥</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                参加过的：<br />
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <div id="history_DIV">
                                <asp:CheckBoxList ID="txtHistory" runat="server" RepeatDirection="Horizontal">
                                    <asp:ListItem Text="无" Value="0">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第一届" Value="1">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第二届" Value="2">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第三届" Value="3">
                                    </asp:ListItem>
                                </asp:CheckBoxList>
                            </div>
                        </td>
                       <td>
                            <asp:CustomValidator ID="customCheckBoxListValidator" runat="server" ErrorMessage="至少选择一项"
                                ClientValidationFunction="ValidateOptions" Display="Dynamic"  ForeColor="Red"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="40">
                了解活动：<br />
            </td>
            <td>
                您从以下渠道得知本活动？
                <asp:DropDownList ID="txtFrom" runat="server">
                    <asp:ListItem Text="请选择" Value="-1" Selected="True">
                    </asp:ListItem>
                    <asp:ListItem Text="搜索引擎" Value="1">
                    </asp:ListItem>
                    <asp:ListItem Text="朋友介绍" Value="2">
                    </asp:ListItem>
                    <asp:ListItem Text="平面媒介" Value="3">
                    </asp:ListItem>
                    <asp:ListItem Text="网站新闻" Value="4">
                    </asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td height="60" colspan="2" align="center" valign="bottom">
                <asp:Button ID="btnInsert" Text="确认报名" runat="server" />
            </td>
        </tr>
    </table>

效果如图：

邀月工作室

源码下载1

源码下载2


邀月注：本文版权由邀月和CSDN共同所有，转载请注明出处。
助人等于自助!  3w@live.cn





downmoon
关注
专栏目录
SpringBoot之@Validated校验List集合参数类型失效的解决方案
一个人的博客
08-15 646
记录一下@Validated校验参数是List集合的时候会失效的解决方案
jquery validate自定义checkbox验证规则和样式
weixin_34075551的博客
12-02 650
　　参考：http://blog.csdn.net/xh16319/article/details/9987847 　　自定义checkbox验证，“检查checkbox是否选中” jQuery.validator.addMethod("isAgreeRule", function(value, element) { return element.checked; }, "请阅...
javascript 中的checkbox验证
dingxingmei的专栏
05-17 746
1： 可能跟你看到的效果不太一样： 切记：：设置样式时：用chencked=checked：表示选择；但是判断是否选择用checked=true or  false   如果checkbox 选择情况下点击之后：此时他的”checked=false“     $(document).ready(function () {         $('#checkbox1').clic
jquery checkbox 验证
acongshijia的专栏
10-13 502
var chk = $(".selectList").find('input'); var b = 0; for(var i=0;i<chk.length;i++){ if(chk[i].type == "checkbox" && chk[i].checked){ b = 1; } } if(!b){ alert('信息不能为空，请至少选择
jquery.validate 版本大全
03-04
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jquery.validate.min.js
06-18
修改validate的remote校验，支持处理返回格式{success:false,message:"提示消息"}
利用jQuery.Validate异步验证用户名是否存在（推荐）
10-20
jQuery.Validate插件提供了一个更为人性化的解决方案，它允许开发者实现异步验证，也就是说，可以在不离开当前页面的情况下，实时地检查用户名是否被占用。异步验证是通过AJAX（Asynchronous JavaScript and XML）...
jquery.validate.js表单验证.pdf
09-27
从给定的文件信息来看，文件主要介绍了jquery.validate.js的表单验证功能。jquery.validate.js是一个强大的jQuery插件，可以帮助开发者快速实现表单验证。以下是该文件中提及的关键知识点： 1. jquery.validate.js...
validate针对checkbox、radio、select标签的验证
weixin_34377065的博客
08-01 496
jQuery.validate是jquery的一个插件，用来辅助开发者在客户端方便快捷的实现表单验证，最终达到提高用户体验的目的。 示例代码 <form id="formLogin" method="post"> <div> <label for="username">Username:</label> &l...
js验证checkbox是否选中至少一项
xiaoyukid的专栏
09-23 6214
function Check(){ var cbs = document.getElementsByTagName("input"); var b = false; for(var i=0;i<cbs.length;i++){ if(
jquery表单验证，jquery.validate全攻略
E01014165的专栏
06-04 690
一、准备工作 需要JQuery版本：1.2.6+, 兼容 1.3.2 官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 最新版本：1.5.5 本地下载：jquery.validate.zip 二、默认校验规则 Java代码 (1)required:true 必输字段   (2)r
checkBox的检验和获取
weixin_34000916的博客
03-18 175
1.检验指定的checkedbox是否被选中，jquery1.6之前和之后的版本之间有区别 jquery1.6之前 1.attr("checked") 的值为：true(选中)； false（未选中）； 2.没有prop方法； jquery1.6之后 1.attr方法值改变，其值为：checked(选中)；undefined（未选中）； 2.有prop方...
Validate的使用
qq_45337431的博客
09-08 6093
Validate插件的使用，可以用来判断表单格式
第9回 验证和确认——缺一不可
热门推荐
软件工程专栏
08-20 1万+
       在软件测试中不仅要检查程序是否出错、程序是否和软件产品的设计规格说明书一致，而且还要检验所实现的正确功能是否就是客户或用户所需要的功能，两者缺一不可，这两部分活动构成了一个完整的测试活动。这就是软件测试中有名的V&V，即Verification和Validation。实际上，在整个软件开发生命周期，Verification和Validation每时每刻都存在着。1. 验证——Veri
element-ui在vue中如何实现校验两个复选框至少选择一个！
TangMonk的博客
09-11 2306
来实现这一点。你可以在 `rules` 对象中定义一个自定义的验证规则来检查 `isCheck1` 和 `isCheck2` 至少有一个被选中。以下是一个示例：```vue。
checkbox表单校验 至少选中一个Checkbox , 否则会报错
最新发布
hyy的博客
06-12 300
checkbox表单校验 至少选中一个Checkbox , 否则会报错
jQuery.validate表单验证插件使用指南
jQuery.validate验证 jQuery.validate是一个功能强大且灵活的表单验证工具，能够帮助开发者快速实现表单验证，提高用户体验。下面是 jQuery.validate 的详细知识点： 用前必备 在使用 jQuery.validate 之前，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值