validate()验证checkBox

这篇博客介绍了如何使用JavaScript和jQuery的validate插件在ASP.NET表单中实现CheckBoxList和DropDownList的验证。包括至少选中一个CheckBox、验证DropDownList不选择默认项以及手机号码格式验证等。
摘要由CSDN通过智能技术生成
<script type="text/javascript">
02.
03. //DropDownList验证方法
04. $.validator.addMethod('selectNone',
05. function(value, element) {
06. return this.optional(element) ||(value!= -1);
07. }, "请选择至少一项!");
08.
09. //ChekcBoxList验证方法
10.
11. /*
12. $.validator.addMethod('atLeastOneChecked', function(value, element) {
13. var checkedCount = 0;
14. $("input[name^='" + <%=txtHistory.UniqueID %> + "']").each(function() {
15. if ($(this).attr('checked')) { checkedCount++; }
16. });
17. return checkedCount>0;
18.
19. },"请选择至少一项");
20. */
21.
22. // 手机号码验证
23. $.validator.addMethod("isMobile", function(value, element) {
24. var length = value.length;
25. var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
26. return this.optional(element) || (length == 11 && mobile.test(value));
27. }, "请正确填写您的手机号码");
28.
29. $(document).ready(function () {
30.
31. //验证CheckBoxList
32. ValidateOptions = function(sender, args) {
33. args.IsValid=false;
34. var len = $("#history_DIV input:checked").length;
35. args.IsValid = (len>0);
36. };
37.
38.
39. $("#form1").validate(
40. {
41. rules: {
42. <%=txtVName.UniqueID %>: {
43. required: true
44. },
45. <%=txtEmail.UniqueID %>: {
46. required: true,
47. email:true
48. },
49. <%=txtRemark.UniqueID %>: {
50. required: true
51. },
52. <%=txtVSex.UniqueID %>: {
53. required: function(element) {
54. return $("input:radio[name='txtVSex']:checked").val()!="";
55. }
56. },
57. <%=txtFrom.UniqueID %>:{
58. selectNone: true
59. },
60.
61. <%=txtMobile.UniqueID %>:{
62. required:true,
63. isMobile:true
64. },
65. <%=txtHistory.UniqueID %>:{
66. //required: function(element) {
67. //return ($("#history_DIV input:checked").length)>0;}
68. //return $("#<%=txtHistory.UniqueID %> input[@type=checkbox]:checked").size()>0;
69. // return $("input[name^='<%=txtHistory.UniqueID %>']").length>0
70. //atLeastOneChecked: true
71.
72. }
73.
74. },
75. messages: {
76. <%=txtRemark.UniqueID %>:
77. {
78. required: "请填写报名理由"
79. },
80. <%=txtVSex.UniqueID %>:
81. {
82. required: "请选择性别"
83. },
84.
85. <%=txtMobile.UniqueID %>:{
86. required: "请填写手机号码"
87. },
88. <%=txtHistory.UniqueID %>:{
89. required: "请选择届数"
90. }
91. }
92. });
93. });
94. </script>


[html] view plain copy
01.<table width="750" border="0" cellpadding="0" cellspacing="5">
02. <tr>
03. <td width="150" height="40">
04. 真实姓名:
05. </td>
06. <td width="600">
07. <asp:TextBox ID="txtVName" runat="Server" Width="280px" />
08. </td>
09. </tr>
10. <tr>
11. <td height="40">
12. 性别:
13. </td>
14. <td>
15. <asp:RadioButtonList ID="txtVSex" runat="server" RepeatDirection="Horizontal">
16. <asp:ListItem Text="男" Value="男"></asp:ListItem>
17. <asp:ListItem Text="女" Value="女"></asp:ListItem>
18. </asp:RadioButtonList>
19. <br />
20. </td>
21. </tr>
22. <tr>
23. <td height="40">
24. 手机号码:<br />
25. </td>
26. <td>
27. <asp:TextBox ID="txtMobile" runat="Server" Width="280px" />
28. <span>请填写真实手机号码方便接收活动通知</span>
29. </td>
30. </tr>
31. <tr>
32. <td height="40">
33. E-Mail:<br />
34. </td>
35. <td>
36. <asp:TextBox ID="txtEmail" runat="Server" Width="280px" CssClass="email" />
37. <span>用于接收邮件通知</span>
38. </td>
39. </tr>
40. <tr>
41. <td height="40">
42. 职业:<br />
43. </td>
44. <td>
45. <asp:RadioButtonList ID="txtC_Name" runat="server" RepeatDirection="Horizontal">
46. <asp:ListItem Text="学生" Value="1"></asp:ListItem>
47. <asp:ListItem Text="职员" Value="2"></asp:ListItem>
48. <asp:ListItem Text="经理" Value="3"></asp:ListItem>
49. <asp:ListItem Text="家庭主妇" Value="4"></asp:ListItem>
50. <asp:ListItem Text="自由职业者" Value="5"></asp:ListItem>
51. </asp:RadioButtonList>
52. </td>
53. </tr>
54. <tr>
55. <td height="40">
56. 报名人数:<br />
57. </td>
58. <td>
59. <asp:RadioButtonList ID="txtC_EName" runat="server" RepeatDirection="Horizontal">
60. <asp:ListItem Text="就我一人" Value="1"></asp:ListItem>
61. <asp:ListItem Text="两人" Value="2"></asp:ListItem>
62. <asp:ListItem Text="三人" Value="3"></asp:ListItem>
63. </asp:RadioButtonList>
64. </td>
65. </tr>
66. <tr>
67. <td height="40">
68. 报名理由:
69. </td>
70. <td>
71. <asp:TextBox TextMode="MultiLine" Columns="50" Rows="5" ID="txtRemark" runat="Server" />
72. <br />
73. <span>优质理由怎么写?1.描述您为什么要申请2.描述活动那里吸引您 3.个性化自由发挥</span>
74. </td>
75. </tr>
76. <tr>
77. <td height="40">
78. 参加过的:<br />
79. </td>
80. <td>
81. <table>
82. <tr>
83. <td>
84. <div id="history_DIV">
85. <asp:CheckBoxList ID="txtHistory" runat="server" RepeatDirection="Horizontal">
86. <asp:ListItem Text="无" Value="0">
87. </asp:ListItem>
88. <asp:ListItem Text="第一届" Value="1">
89. </asp:ListItem>
90. <asp:ListItem Text="第二届" Value="2">
91. </asp:ListItem>
92. <asp:ListItem Text="第三届" Value="3">
93. </asp:ListItem>
94. </asp:CheckBoxList>
95. </div>
96. </td>
97. <td>
98. <asp:CustomValidator ID="customCheckBoxListValidator" runat="server" ErrorMessage="至少选择一项"
99. ClientValidationFunction="ValidateOptions" Display="Dynamic" ForeColor="Red"/>
100. </td>
101. </tr>
102. </table>
103. </td>
104. </tr>
105. <tr>
106. <td height="40">
107. 了解活动:<br />
108. </td>
109. <td>
110. 您从以下渠道得知本活动?
111. <asp:DropDownList ID="txtFrom" runat="server">
112. <asp:ListItem Text="请选择" Value="-1" Selected="True">
113. </asp:ListItem>
114. <asp:ListItem Text="搜索引擎" Value="1">
115. </asp:ListItem>
116. <asp:ListItem Text="朋友介绍" Value="2">
117. </asp:ListItem>
118. <asp:ListItem Text="平面媒介" Value="3">
119. </asp:ListItem>
120. <asp:ListItem Text="网站新闻" Value="4">
121. </asp:ListItem>
122. </asp:DropDownList>
123. </td>
124. </tr>
125. <tr>
126. <td height="60" colspan="2" align="center" valign="bottom">
127. <asp:Button ID="btnInsert" Text="确认报名" runat="server" />
128. </td>
129. </tr>
130. </table>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值