天然呆的爱死你了呢
- 浏览: 12009 次
-
最新评论
<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>
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>
分享到：
发表评论
-
Jquery 全选反选
2016-09-02 18:36 490版权声明：本文为博主原创文章，未经博主允许不得转载。 &l ... -
Jquer选取后代元素
2016-09-02 18:30 632使用jquery获取某DIV的子元素，通常有以下两种方法： ... -
Validate 验证框架详解
2016-09-01 13:15 607默认情况下，验证提示信息用label元素来显示, 并且会添加c ... -
241个jquery插件—jquery插件大全 （转载）
2016-08-26 12:09 431jQuery由美国人John Resig创建，至今已吸引了来自 ... -
jQuery的form表单取值 object对象的取值
2016-08-26 11:56 2001开发过程中经常要处理页面表单元素，如：在下拉框select中获 ...
相关推荐
Jquery.Validate是一个相当棒的客户端验证控件，它的功能强大就不必说了，本文主要介绍了它对asp.net中三类控件CheckBoxList,RadioButtonList,DropDownList是否选中的验证
### jQuery验证框架内置验证方法validate #### 一、概述 jQuery验证框架，即`jquery.validate.js`，是一款非常实用的JavaScript库，它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件，可以轻松...
为了让验证更即时，可以在checkbox的`change`事件上添加监听器，每次用户勾选或取消时立即进行验证： ```javascript checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { ...
`jQuery Validate` 是一个非常流行的前端表单验证插件，它基于 jQuery 开发，提供了丰富的验证规则和高度定制化的错误消息处理机制。通过使用 `jQuery Validate`，开发者能够轻松地实现对表单输入的有效性检查，提高...
《关于jQuery Validate Plugin指定需要验证对象的解决方案》 在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预设的规则。jQuery Validate Plugin是一款强大的客户端表单验证插件，它使得这一过程...
七、局部验证与全局验证七、局部验证与全局验证vee-validate有两种验证模式：全局验证和局部验证。全局验证意味着一旦表单元素触发指定事件（如blur），vee-validate就会自动验证该元素。局部验证则需要你在代码中...
1.验证的表单元素，需要添加 class 名 : vf-validate 方开启验证； 2.当使用 vf_func 调用其他验证函数时，会传入“当前元素”；且需要在验证函数中返回验证状态：true（验证成功），其他或false皆为验证失败 * ...
本文重点讲述了在使用JQuery Validate插件进行表单验证时，如何处理radio、checkbox以及select元素的验证问题，并提供了解决方案。 首先，我们需要注意的是，radio、checkbox以及select元素的验证方法和表单中其它...
对于单选按钮（radio）和复选框（checkbox），需要将它们包裹在一个元素内，并在该元素上添加验证规则。例如： ```html 性别必选" data-type="radio"> <label><input type="radio" name="sex">男 <label><input...
之前一篇文章介绍了jQuery Validate表单验证入门的基础知识，详细内容参见《jQuery Validate表单验证入门学习》，今天这篇文章深入学习jQuery Validate表单验证，以下就是文章的全部内容： 1、用其他方式替代默认的 ...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。 一、导入js库 [removed]/validate/jquery-1.6.2.min.js>[removed] [removed]/...
表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证\一般验证方式同时使用）。 无此属性视为此域允许空值。 如：字段不能为空！"> 3、最大长度验证（可以和空值验证、一般验证方式同时...
在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能，以及如何进行表单验证。 1. **全选功能** 要实现全选功能，首先我们需要一个主复选框...
为了实现上述的验证，验证库Validate-1.0.1.js内部必须包含了一系列的验证函数，每个函数都对应一个验证规则。例如，对于整数验证，可能会有一个函数检查字符串是否只包含数字。对于长度验证，则会检查字符串长度...
在表单提交时，通常需要验证`checkbox`和`radio`的选中状态。例如，确保至少有一个复选框被选中： ```javascript function validateForm() { var checkboxes = document.querySelectorAll('input[type="checkbox"]...
Convalida不仅支持EditText，还支持其他类型的输入控件，如Spinner、CheckBox、RadioButton等，可以对这些控件的值进行验证。 5. **自定义验证规则**： 如果预定义的注解无法满足特定需求，开发者可以创建自定义...
`validate.js`文件很可能包含了验证函数，它们可能在表单提交事件中触发，如`onsubmit`。常见的验证方法包括正则表达式匹配、比较值、检查数据类型等。 7. **事件处理**：JavaScript提供了多种事件处理方式，如内联...
通过定义不同的表单字段如文本框（`<input type="text">`）、密码框（`<input type="password">`）、复选框（`<input type="checkbox">`）等，我们可以构建出各种各样的用户界面。每个表单字段都可以与JavaScript...