Главная Обзор Помощь
Регистрация Вход
wangdaping
/
wp
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: master
Ветки Метки
wp
/
nwyj
/
.svn
/
pristine
/
78
/
78cbdf81f33f5b35dffb63f291c39f96de6cbf9d.svn-base

78cbdf81f33f5b35dffb63f291c39f96de6cbf9d.svn-base 25 KB
Постоянная ссылка История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 

  5. <title>表单验证</title>
    6. 

  6. 

  7. <!-- 框架必需start -->
    8. 

  8. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    9. 

  9. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    10. 

  10. <script type="text/javascript" src="../../libs/js/framework.js"></script>
    11. 

  11. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    12. 

  12. <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    13. 

  13. <link rel="stylesheet" type="text/css" id="customSkin"/>
    14. 

  14. <!-- 框架必需end -->
    15. 

  15. 

  16. <!-- 树组件start -->
    17. 

  17. <script type="text/javascript" src="../../libs/js/tree/ztree/ztree.js"></script>
    18. 

  18. <link type="text/css" rel="stylesheet" href="../../libs/js/tree/ztree/ztree.css"></link>
    19. 

  19. <!-- 树组件end -->
    20. 

  20. 

  21. <!-- 树形下拉框start -->
    22. 

  22. <script type="text/javascript" src="../../libs/js/form/selectTree.js"></script>
    23. 

  23. <!-- 树形下拉框end -->
    24. 

  24. 

  25. <!-- 日期控件start -->
    26. 

  26. <script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
    27. 

  27. <!-- 日期控件end -->
    28. 

  28. 

  29. <!-- 条件过滤器 start -->
    30. 

  30. <script type="text/javascript" src="../../libs/js/form/filter.js"></script>
    31. 

  31. <!-- 条件过滤器 end -->
    32. 

  32. 

  33. <!-- 数字步进器start -->
    34. 

  34. <script type="text/javascript" src="../../libs/js/form/stepper.js"></script>
    35. 

  35. <!-- 数字步进器end -->
    36. 

  36. 

  37. <!-- 软键盘控件start -->
    38. 

  38. <script type="text/javascript" src="../../libs/js/form/keypad.js"></script>
    39. 

  39. <!-- 软键盘控件end -->
    40. 

  40. 

  41. <!-- 双向选择器start -->
    42. 

  42. <script type="text/javascript" src="../../libs/js/form/lister.js"></script>
    43. 

  43. <!-- 双向选择器end -->
    44. 

  44. 

  45. <!--自动提示框start-->
    46. 

  46. <script type='text/javascript' src='../../libs/js/form/suggestion.js'></script>
    47. 

  47. <!--自动提示框end-->
    48. 

  48. 

  49. <!-- 树形双选器start -->
    50. 

  50. <script type="text/javascript" src="../../libs/js/form/listerTree.js"></script>
    51. 

  51. <!-- 树形双选器end -->
    52. 

  52. 

  53. <!-- 组合下拉框start -->
    54. 

  54. <script type="text/javascript" src="../../libs/js/form/selectCustom.js"></script>
    55. 

  55. <!-- 组合拉框end -->
    56. 

  56. 

  57. <!-- 表单验证start -->
    58. 

  58. <script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
    59. 

  59. <script src="../../libs/js/form/validation.js" type="text/javascript"></script>
    60. 

  60. <!-- 表单验证end -->
    61. 

  61. 

  62. 

  63. </head>
    64. 

  64. <body>
    65. 

  65. 通过设置验证组件的showOnMouseOver属性为false，来实现非鼠标移入出现提示的验证效果。
    66. 

  66.  <div class="box1">
    67. 

  67.     <fieldset>
    68. 

  68.       <legend>1、基本使用</legend>
    69. 

  69.    <form id="form1" method="post" action="" showOnMouseOver="false">
    70. 

  70. 	  <table class="tableStyle" formMode="line" style="width:1060px;">
    71. 

  71. 		<tr>
    72. 

  72. 			<th colspan="4">表单填写</th>
    73. 

  73. 		</tr>
    74. 

  74. 		<tr>
    75. 

  75. 			<td width="150">用户名：</td><td width="380"><input type="text" class="validate[required,custom[noSpecialCaracters]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入英文或数字</div><div class="clear"></div></td>
    76. 

  76. 			<td width="150">姓名：</td><td width="380"><input type="text" class="validate[required,custom[chinese],length[0,20]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入20字以内的中文</div><div class="clear"></div></td>
    77. 

  77. 		</tr>
    78. 

  78. 		<tr>	
    79. 

  79. 			<td>密码：</td><td><input type="password" id="pwd" class="validate[required,length[6,11],passwordStrength] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入6-11位的数字</div><div class="clear"></div></td>
    80. 

  80. 			<td>密码确认：</td><td><input type="password" class="validate[required,confirm[pwd]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    81. 

  81. 		</tr>
    82. 

  82. 		<tr>
    83. 

  83. 			<td>爱好：</td><td>
    84. 

  84. 				<div id="hobby" style="width:130px;" class="float_left checkboxRender"><input type="checkbox" id="checkbox-1" class="validate[minCheckbox[1]] checkbox" name="ck1" value="选项1"/><label for="checkbox-1" class="hand">唱歌</label>
    85. 

  85. 				<input type="checkbox" id="checkbox-2" class="validate[minCheckbox[1]] checkbox" name="ck1" value="选项2"/><label for="checkbox-2" class="hand">跳舞</label>
    86. 

  86. 				</div>
    87. 

  87. 				<span class="star float_left">*</span>
    88. 

  88. 				<div class="validation_info"></div><div class="clear"></div>
    89. 

  89. 			</td>
    90. 

  90. 		    <td>性别：</td>
    91. 

  91. 			<td><div  style="width:130px;" class="float_left checkboxRender"><input type="radio" class="validate[required] radio" id="radio-1" name="ra" value="radio-1"/><label for="radio-1" class="hand">男</label>
    92. 

  92. 				<input type="radio" id="radio-2" name="ra" class="validate[required] radio" value="radio-2"/><label for="radio-2" class="hand">女</label></div>
    93. 

  93. 				<span class="star float_left">*</span>
    94. 

  94. 				<div class="validation_info"></div><div class="clear"></div>
    95. 

  95. 			</td>
    96. 

  96. 		</tr>
    97. 

  97. 		<tr>
    98. 

  98. 			<td>年龄：</td><td><input type="text" class="validate[required,custom[onlyNumber],length[0,3]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入3位以内的数字</div><div class="clear"></div></td>
    99. 

  99. 			<td>电子邮件：</td>
    100. 

  100. 			<td>
    101. 

  101. 				<input type="text" class="validate[required,custom[email]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>
    102. 

  102. 				
    103. 

  103. 			</td>
    104. 

  104. 		</tr>
    105. 

  105. 		<tr>
    106. 

  106. 			<td>固定电话：</td><td><input type="text" class=" validate[required,custom[telephone]] float_left"/><span class="star float_left">*</span><div class="validation_info">如:010-29292929</div><div class="clear"></div></td>
    107. 

  107. 			<td>英文名：</td><td><input type="text" class="validate[required,custom[onlyLetter]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入英文字母</div><div class="clear"></div></td>
    108. 

  108. 		</tr>
    109. 

  109. 		
    110. 

  110. 		<tr>
    111. 

  111. 			<td>手机号码：</td><td><input type="text" class=" validate[required,custom[mobilephone]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    112. 

  112. 			<td>邮政编码：</td><td><input type="text" class=" validate[required,custom[zipcode]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    113. 

  113. 		</tr>
    114. 

  114. 		<tr>
    115. 

  115. 			<td>QQ：</td><td><input type="text" class=" validate[required,custom[qq]] float_left"/><span class="star float_left">*</span><div class="validation_info">4-9位数字</div><div class="clear"></div></td>
    116. 

  116. 			<td>非法字符：</td>
    117. 

  117. 			<td>
    118. 

  118. 			<input type="text" class=" validate[required,custom[illegalLetter]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>
    119. 

  119. 			</td>
    120. 

  120. 		</tr>
    121. 

  121. 		<tr>
    122. 

  122. 			<td>IP地址：</td><td><input type="text" class=" validate[required,custom[ip]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    123. 

  123. 			<td>非负整数：</td><td><input type="text" class=" validate[required,custom[onlyNumber]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    124. 

  124. 		</tr>
    125. 

  125. 		<tr>
    126. 

  126. 			<td>正负小数：</td><td><input type="text" class=" validate[required,custom[onlyDecimal]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入4位以内的小数（正负均可）</div><div class="clear"></div></td>
    127. 

  127. 			<td>正负整数与小数：</td><td><input type="text" class=" validate[required,custom[onlyNumberWide]] float_left"/><span class="star float_left">*</span><div class="validation_info">请输入整数或小数（正负均可）</div><div class="clear"></div></td>
    128. 

  128. 		</tr>
    129. 

  129. 		<tr>
    130. 

  130. 			<td>单选下拉框：</td><td><select class="validate[required] float_left" prompt="请选择"  data='{"list":[{"value":"1","key":"北京"},{"value":"2","key":"黑龙江"}]}'></select><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    131. 

  131. 			<td>树形单选下拉框：</td><td><div class="selectTree validate[required] float_left" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>	</td>
    132. 

  132. 		</tr>
    133. 

  133. 		<tr>
    134. 

  134. 			<td>多选下拉框：</td><td><div class="selectTree validate[required] float_left" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"员工1"},{ "id":"2", "parentId":"0", "name":"员工2"},{ "id":"3", "parentId":"0", "name":"员工3"},{ "id":"4", "parentId":"0", "name":"员工4"}]}' multiMode="true" noGroup="true"></div><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>	</td>
    135. 

  135. 			<td>树形多选下拉框：</td><td><div class="selectTree validate[required] float_left" data='{"treeNodes":[{"id":"1","parentId":"0","name":"部门1","nocheck":"true","clickExpand":"true","open":"true"},{"id":"11","parentId":"1", "name":"员工1"},{"id":"12","parentId":"1", "name":"员工2"},{"id":"13","parentId":"1", "name":"员工3"},{"id":"2","parentId":"0","name":"部门2","nocheck":"true","clickExpand":"true","open":"true"},{"id":"21","parentId":"2", "name":"员工4"}]}' multiMode="true"></div><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>	</td>
    136. 

  136. 		</tr>
    137. 

  137. 		<tr>
    138. 

  138. 			<td>数字步进器：</td><td><input id="step1" type="text" class="stepper validate[required] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>	</td>
    139. 

  139. 			<td>软键盘控件：</td><td><input class="keypad validate[required] float_left" type="text"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    140. 

  140. 		</tr>
    141. 

  141. 		<tr>
    142. 

  142. 			<td>自动提示框：</td><td> <div class="suggestion validate[required] float_left" id="suggestion1" keepDefaultStyle="true" showList="true"></div><span class="star float_left">*</span><div class="validation_info"></div><div class="clear">	</div></td>
    143. 

  143. 			<td>日期选择框：</td><td><input type="text" class="date validate[required,custom[date]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    144. 

  144. 		</tr>
    145. 

  145. 		<tr>
    146. 

  146. 			<td>条件过滤器：</td>
    147. 

  147. 			<td colspan="3">
    148. 

  148. 			<div class="float_left">
    149. 

  149. 				<div class="filter validate[required] float_left" filterWidth="355" data='{"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}]}'></div>
    150. 

  150. 			</div>
    151. 

  151. 			<div class="float_left padding_top5">
    152. 

  152. 				<span class="star float_left">*</span>	
    153. 

  153. 				<div class="validation_info"></div>
    154. 

  154. 				<div class="clear"></div>	
    155. 

  155. 			</div>
    156. 

  156. 			<div class="clear"></div>		
    157. 

  157. 			</td>
    158. 

  158. 		</tr>
    159. 

  159. 		<tr>
    160. 

  160. 			<td>双向选择器：</td>
    161. 

  161. 			<td colspan="3">
    162. 

  162. 			<div class="float_left">
    163. 

  163. 			 <div class="lister validate[required] float_left" listerWidth="140" listerHeight="120" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>
    164. 

  164. 			</div>
    165. 

  165. 			<div class="float_left" style="padding:90px 0 0 0;">
    166. 

  166. 				<span class="star float_left">*</span>	
    167. 

  167. 				<div class="validation_info"></div>
    168. 

  168. 				<div class="clear"></div>		
    169. 

  169. 			</div>
    170. 

  170. 			<div class="clear"></div>		
    171. 

  171. 			</td>
    172. 

  172. 		</tr>
    173. 

  173. 		<tr>
    174. 

  174. 			<td>树形双选器：</td>
    175. 

  175. 			<td colspan="3">
    176. 

  176. 			<div class="float_left">
    177. 

  177. 			<div class="listerTree validate[required] float_left" listerWidth="140" listerHeight="120"  data='{"toList":[],"fromList":[{"id":"1","parentId":"0","open":"true","name":"部门1","oldParentId":"null","drag":"false"},{"id":"11","parentId":"1","name":"员工1","oldParentId":"1"},{"id":"12","parentId":"1","name":"员工2","oldParentId":"1"},{"id":"2","parentId":"0","open":"true","name":"部门2","oldParentId":"null","drag":"false"},{"id":"21","parentId":"2","name":"员工4","oldParentId":"2"}]}'></div>
    178. 

  178. 			</div>
    179. 

  179. 			<div class="float_left" style="padding:80px 0 0 0;">
    180. 

  180. 				<span class="star float_left">*</span>	
    181. 

  181. 				<div class="validation_info"></div>
    182. 

  182. 				<div class="clear"></div>	
    183. 

  183. 			</div>
    184. 

  184. 			<div class="clear"></div>		
    185. 

  185. 			</td>
    186. 

  186. 		</tr>
    187. 

  187. 		<tr>
    188. 

  188. 			<td>文本域：</td>
    189. 

  189. 			<td colspan="3">
    190. 

  190. 			<div class="float_left">
    191. 

  191. 			<textarea class="validate[required] float_left" style="width:350px;"></textarea>
    192. 

  192. 			</div>
    193. 

  193. 			<div class="float_left" style="padding:30px 0 0 0;">
    194. 

  194. 				<span class="star float_left">*</span>	
    195. 

  195. 				<div class="validation_info"></div>
    196. 

  196. 				<div class="clear"></div>	
    197. 

  197. 			</div>
    198. 

  198. 			<div class="clear"></div>		
    199. 

  199. 			</td>
    200. 

  200. 		</tr>
    201. 

  201. 		<tr>
    202. 

  202. 			<td>组合下拉框：</td>
    203. 

  203. 			<td colspan="3">
    204. 

  204. 			<div class="selectCustom validate[required] float_left" boxWidth="380" prompt="请选择一种格式" id="selectCostom5" selWidth="342">
    205. 

  205. 			<div id="customContent5" style="font-size:12px;padding:0 0 10px 10px;">
    206. 

  206. 				<div class="navIconSmall" id="MP3">
    207. 

  207. 					<img src="../../libs/icons/png/16.png"/><br />
    208. 

  208. 					MP3格式
    209. 

  209. 				</div>
    210. 

  210. 				<div class="navIconSmall" id="WMA">
    211. 

  211. 					<img src="../../libs/icons/png/21.png"/><br />
    212. 

  212. 					WMA格式
    213. 

  213. 				</div>
    214. 

  214. 				<div class="navIconSmall" id="AVI">
    215. 

  215. 					<img src="../../libs/icons/png/25.png"/><br />
    216. 

  216. 					AVI格式
    217. 

  217. 				</div>
    218. 

  218. 				<div class="navIconSmall" id="WAVE">
    219. 

  219. 					<img src="../../libs/icons/png/24.png"/><br />
    220. 

  220. 					WAVE格式
    221. 

  221. 				</div>
    222. 

  222. 				<div class="navIconSmall" id="MIDI">
    223. 

  223. 					<img src="../../libs/icons/png/30.png"/><br />
    224. 

  224. 					MIDI格式
    225. 

  225. 				</div>
    226. 

  226. 				<div class="navIconSmall" id="MPEG">
    227. 

  227. 					<img src="../../libs/icons/png/29.png"/><br />
    228. 

  228. 					MPEG格式
    229. 

  229. 				</div>
    230. 

  230. 				<div class="navIconSmall" id="TIF">
    231. 

  231. 					<img src="../../libs/icons/png/22.png"/><br />
    232. 

  232. 					TIF格式
    233. 

  233. 				</div>
    234. 

  234. 				<div class="navIconSmall" id="PNG">
    235. 

  235. 					<img src="../../libs/icons/png/23.png"/><br />
    236. 

  236. 					PNG格式
    237. 

  237. 				</div>
    238. 

  238. 				<div class="navIconSmall" id="JPEG">
    239. 

  239. 					<img src="../../libs/icons/png/33.png"/><br />
    240. 

  240. 					JPEG格式
    241. 

  241. 				</div>
    242. 

  242. 				<div class="navIconSmall" id="TGA">
    243. 

  243. 					<img src="../../libs/icons/png/15.png" width="60" height="60"/><br />
    244. 

  244. 					TGA格式
    245. 

  245. 				</div>
    246. 

  246. 				<div class="navIconSmall" id="GIF">
    247. 

  247. 					<img src="../../libs/icons/png/33.png"/><br />
    248. 

  248. 					GIF格式
    249. 

  249. 				</div>
    250. 

  250. 				<div class="navIconSmall" id="BMP">
    251. 

  251. 					<img src="../../libs/icons/png/37.png"/><br />
    252. 

  252. 					BMP格式
    253. 

  253. 				</div>
    254. 

  254. 				<div class="clear"></div>			
    255. 

  255. 			</div>
    256. 

  256. 		</div>
    257. 

  257. 				<span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div>	
    258. 

  258. 			</td>
    259. 

  259. 			<tr>
    260. 

  260. 			<td>同步上传控件：</td>
    261. 

  261. 			<td colspan="3">
    262. 

  262. 			<div class="float_left">
    263. 

  263. 			<input type="file"   showInfo="false"  class="validate[required,custom[onlyImage]] float_left" fileWidth="352"/>
    264. 

  264. 			</div>
    265. 

  265. 			<div class="float_left" style="padding:5px 0 0 0;">
    266. 

  266. 				<span class="star">*</span>	
    267. 

  267. 			</div>
    268. 

  268. 			<div class="validation_info">请上传图片</div>
    269. 

  269. 			<div class="clear"></div>	
    270. 

  270. 			</td>
    271. 

  271. 		</tr>
    272. 

  272. 		<tr>
    273. 

  273. 			<td colspan="4">
    274. 

  274. 				<input type="button" value=" 提 交 "  onclick="validateForm('#form1');"/>
    275. 

  275. 				<input type="button" value=" 重 置 "/>
    276. 

  276. 			</td>
    277. 

  277. 		</tr>
    278. 

  278. 	 </table>
    279. 

  279.   </form>
    280. 

  280.  </fieldset>
    281. 

  281.   <div class="height_15"></div>
    282. 

  282.   
    283. 

  283.   <fieldset>
    284. 

  284.       <legend>2、手动触发验证</legend>
    285. 

  285.       <p>点击按钮后，对上面的表单手动触发一次验证。</p>
    286. 

  286.       <input type="button" value="点击验证“爱好”复选框" onclick="validateForm('#hobby');"/>
    287. 

  287.       <input type="button" value="点击验证上面的表单" onclick="validateForm('#form1');"/>
    288. 

  288.       <p>
    289. 

  289.       手动验证多用于异步提交表单的情况。在提交表单前手动验证，如果验证通过再调用函数进行表单的异步提交。详见：表单异步提交内容
    290. 

  290.       </p>
    291. 

  291.   </fieldset>
    292. 

  292.   <div class="height_15"></div>
    293. 

  293.   
    294. 

  294.    <fieldset>
    295. 

  295.       <legend>3、ajax验证</legend>
    296. 

  296.         <div class="red">此示例由后台支持</div>
    297. 

  297.         可输入已存在用户名进行测试，例如：guest、an、kong、yang等<br/>
    298. 

  298.        <form id="form3" method="post" action="" showOnMouseOver="false">
    299. 

  299.        		<table style="width:600px;" class="tableStyle" formMode="transparent">
    300. 

  300.        		<tr>
    301. 

  301. 				<td width="100">用户名：</td><td><input type="text" class="validate[required,custom[noSpecialCaracters],ajax[../../userAction.do?method=validateUserName|* 用户名已存在!]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    302. 

  302. 			</tr>
    303. 

  303. 			<tr>
    304. 

  304. 				<td colspan="2"><input type="button" onclick="ajaxHander()" value="提交"/></td></td>
    305. 

  305. 			</tr>
    306. 

  306.        		 </table>
    307. 

  307.        </form>
    308. 

  308.   </fieldset>
    309. 

  309.   <div class="height_15"></div>
    310. 

  310.   
    311. 

  311.   <fieldset>
    312. 

  312.       <legend>4、为动态创建的表单添加验证</legend>
    313. 

  313.       <input type="button" value="创建新表单" onclick="addNewForm()" id="testBtn"/>
    314. 

  314.   </fieldset>
    315. 

  315.   <div class="height_15"></div>
    316. 

  316.   
    317. 

  317.   <fieldset>
    318. 

  318.       <legend>5、为元素动态添加并触发验证</legend>
    319. 

  319.       此例为复选框选中后，电子邮件必填；不选中则为非必填项。<br/>
    320. 

  320.       <form id="form4" method="post" action="" failAlert="请将表单填写完整！" showOnMouseOver="false">
    321. 

  321. 		<table class="tableStyle" formMode="line" style="width:800px;">
    322. 

  322. 			<tr>
    323. 

  323. 				<th colspan="2">表单填写</th>
    324. 

  324. 			</tr>
    325. 

  325. 			<tr>
    326. 

  326. 				<td width="200">用户名：</td>
    327. 

  327. 				<td><input type="text" class="validate[required,custom[noSpecialCaracters]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    328. 

  328. 			</tr>
    329. 

  329. 			<tr>
    330. 

  330. 				<td>是否愿意留下邮箱：</td><td><input type="checkbox" id="myCheck" onclick="emailChange();"/></td>
    331. 

  331. 			</tr>
    332. 

  332. 			<tr>
    333. 

  333. 				<td>电子邮件：</td><td id="emailContainer"><input type="text" id="emailInput" class="validate[custom[email]] float_left"/><span id="emailTip" class="star float_left"></span><div class="validation_info"></div><div class="clear"></div></td>
    334. 

  334. 			</tr>
    335. 

  335. 			<tr>
    336. 

  336. 				<td colspan="2">
    337. 

  337. 					<input type="submit" value=" 提 交 "/>
    338. 

  338. 					<input type="reset" value=" 重 置 "/>
    339. 

  339. 				</td>
    340. 

  340. 			</tr>
    341. 

  341. 		</table>
    342. 

  342. 	</form>	
    343. 

  343.   </fieldset>
    344. 

  344.    <div class="height_15"></div>
    345. 

  345.    
    346. 

  346.    <fieldset>
    347. 

  347.       <legend>6、设置不允许输入的内容</legend>
    348. 

  348.      此例中，不允许输入admin<br/>
    349. 

  349.       <form id="form4" method="post" action=""  showOnMouseOver="false">
    350. 

  350. 		<table class="tableStyle" formMode="line" style="width:800px;">
    351. 

  351. 			<tr>
    352. 

  352. 				<th colspan="2">表单填写</th>
    353. 

  353. 			</tr>
    354. 

  354. 			<tr>
    355. 

  355. 				<td width="200">用户名：</td>
    356. 

  356. 				<td><input type="text" class="validate[required,exemptString[admin|不允许以admin为用户名]] float_left"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    357. 

  357. 			</tr>
    358. 

  358. 			<tr>
    359. 

  359. 				<td colspan="2">
    360. 

  360. 					<input type="submit" value=" 提 交 "/>
    361. 

  361. 					<input type="reset" value=" 重 置 "/>
    362. 

  362. 				</td>
    363. 

  363. 			</tr>
    364. 

  364. 		</table>
    365. 

  365. 	</form>	
    366. 

  366. 	可对一个文本框可同时设置多个不允许输入的内容。
    367. 

  367.   </fieldset>
    368. 

  368.    <div class="height_15"></div>
    369. 

  369.    
    370. 

  370.    <fieldset>
    371. 

  371.       <legend>7、页面添加验证函数</legend>
    372. 

  372.      此例中，不允许输入小于50的数字<br/>
    373. 

  373.       <form id="form4" method="post" action=""  showOnMouseOver="false">
    374. 

  374. 		<table class="tableStyle" formMode="line" style="width:800px;">
    375. 

  375. 			<tr>
    376. 

  376. 				<th colspan="2">表单填写</th>
    377. 

  377. 			</tr>
    378. 

  378. 			<tr>
    379. 

  379. 				<td width="200">金额：</td>
    380. 

  380. 				<td><input type="text" class="validate[required,custom[onlyNumber],functionCall[func1|* 金额不能小于50]] float_left" id="input1"/><span class="star float_left">*</span><div class="validation_info"></div><div class="clear"></div></td>
    381. 

  381. 			</tr>
    382. 

  382. 			<tr>
    383. 

  383. 				<td colspan="2">
    384. 

  384. 					<input type="submit" value=" 提 交 "/>
    385. 

  385. 					<input type="reset" value=" 重 置 "/>
    386. 

  386. 				</td>
    387. 

  387. 			</tr>
    388. 

  388. 		</table>
    389. 

  389. 	</form>	
    390. 

  390. 	此方式有两个特点：<br/>
    391. 

  391. 	1、在页面中添加规则函数，这样可以在不改变规则文件validationRule.js的前提下添加个性化的验证。<br/>
    392. 

  392. 	2、可以不用正则表达式，而是通过一些规则计算来判断是否符合要求。不符合规则的话让该函数返回true即可。<br/>
    393. 

  393.   </fieldset>
    394. 

  394.   <div class="height_15"></div>
    395. 

  395.   
    396. 

  396.   
    397. 

  397.   
    398. 

  398.   
    399. 

  399.   
    400. 

  400.  
    401. 

  401.  </div>
    402. 

  402. 

  403. 

  404. <script type="text/javascript">
    405. 

  405. 	var listdata={"list":[
    406. 

  406. 		{value:"1",key:"北京",suggest:"北京|beijing|bj"},
    407. 

  407. 		{value:"2",key:"广州",suggest:"广州|guangzhou|gz"},
    408. 

  408. 		{value:"3",key:"深圳",suggest:"深圳|shenzhen|sz"},
    409. 

  409. 		{value:"4",key:"上海",suggest:"上海|shanghai|sh"},
    410. 

  410. 		{value:"5",key:"长沙",suggest:"长沙|changsha|cs"},
    411. 

  411. 		{value:"6",key:"成都",suggest:"成都|chengdu|cd"},
    412. 

  412. 		{value:"7",key:"贵阳",suggest:"贵阳|guiyang|gy"},
    413. 

  413. 		{value:"8",key:"海口",suggest:"海口|haikou|hk"},
    414. 

  414. 		{value:"9",key:"杭州",suggest:"杭州|hangzhou|hz"},
    415. 

  415. 		{value:"10",key:"昆明",suggest:"昆明|kunming|km"},
    416. 

  416. 		{value:"11",key:"南昌",suggest:"南昌|nanchang|nc"},
    417. 

  417. 		{value:"12",key:"南京",suggest:"南京|nanjing|nj"},
    418. 

  418. 		{value:"13",key:"三亚",suggest:"三亚|sanya|sy"},
    419. 

  419. 		{value:"14",key:"沈阳",suggest:"沈阳|shenyang|sy"},
    420. 

  420. 		{value:"15",key:"温州",suggest:"温州|wenzhou|wz"},
    421. 

  421. 		{value:"16",key:"武汉",suggest:"武汉|wuhan|wh"},
    422. 

  422. 		{value:"17",key:"厦门",suggest:"厦门|xiamen|xm"},
    423. 

  423. 		{value:"18",key:"西安",suggest:"西安|xian|xa"},
    424. 

  424. 		{value:"19",key:"郑州",suggest:"郑州|zhenghou|zz"},
    425. 

  425. 		{value:"20",key:"汕头",suggest:"汕头|shantou|st"},
    426. 

  426. 		{value:"21",key:"太原",suggest:"太原|taiyuan|ty"},
    427. 

  427. 		{value:"22",key:"天津",suggest:"天津|tianjin|tj"}]};
    428. 

  428. 	$(function(){
    429. 

  429. 		 $("#suggestion1").data("data",listdata);
    430. 

  430. 		 $("#suggestion1").render();
    431. 

  431. 		 
    432. 

  432. 		 $(".navIconSmall").each(function(){
    433. 

  433.             	$(this).hover(function(){
    434. 

  434. 					$(this).addClass("navIconSmall_hover");
    435. 

  435. 				},function(){
    436. 

  436. 					$(this).removeClass("navIconSmall_hover");
    437. 

  437. 				})
    438. 

  438. 				$(this).click(function(){
    439. 

  439. 					$(".navIconSmall").removeClass("navIconSmall_current");
    440. 

  440. 	            	$(this).addClass("navIconSmall_current");
    441. 

  441. 	            	$("#selectCostom5").setValue($(this).attr("id"),$(this).text().trim());
    442. 

  442. 				})
    443. 

  443.             })
    444. 

  444. 	})
    445. 

  445. 	
    446. 

  446. 	//手动触发验证，被验证的表单元素是containerId容器里的。 可以验证整个表单，也可以验证部分表单。
    447. 

  447. 	function validateForm(containerId){
    448. 

  448. 	    var valid = $(containerId).validationEngine({returnIsValid: true,showOnMouseOver:false});
    449. 

  449. 		if(valid == true){
    450. 

  450. 			top.Dialog.alert('进行提交处理');
    451. 

  451. 		}else{
    452. 

  452. 		    top.Dialog.alert('表单填写不正确，请按要求填写！');
    453. 

  453. 		} 
    454. 

  454. 	} 
    455. 

  455. 	
    456. 

  456. 	function addNewForm(){
    457. 

  457. 		var $table=$(' <form id="form2" method="post" action="" failAlert="表单填写不正确，请按要求填写！" showOnMouseOver="false">'+
    458. 

  458. 		'<table class="tableStyle" formMode="line" style="width:500px;">'+
    459. 

  459. 		'<tr><th colspan="2">动态添加验证功能</th></tr>'+
    460. 

  460. 		'<tr><td width="100">用户名：</td><td><input type="text" id="inputa1" class="validate[required,custom[noSpecialCaracters]] float_left"  validateField="validate_duser"/><span class="star float_left">*</span><div id="validate_duser" class="validation_info"></div><div class="clear"></div></td></tr>'+
    461. 

  461. 		'<tr><td>密码：</td><td><input type="password" id="inputa2" class="validate[required,length[6,11],custom[noSpecialCaracters]] float_left"  validateField="validate_dpass"/><span class="star float_left">*</span><div id="validate_dpass" class="validation_info"></div><div class="clear"></div></td></tr>	'+
    462. 

  462. 		'<tr><td>籍贯：</td><td><select id="inputa3" class="validate[required] float_left" prompt="请选择"  validateField="validate_dselect"></select><span class="star float_left">*</span><div id="validate_dselect" class="validation_info"></div><div class="clear"></div></td></tr>'+
    463. 

  463. 		'<tr><td colspan="2"><input type="button" value="提交" id="inputa4" onclick="validateForm(form2)"/>&nbsp;<input type="reset" value="重置" id="inputa5"/></td></tr>'+
    464. 

  464. 	'</table></form>')
    465. 

  465. 		$("#testBtn").after($table); 
    466. 

  466. 		$table.find("table").render();
    467. 

  467. 		$table.find("#inputa1").render();
    468. 

  468. 		$table.find("#inputa2").render();
    469. 

  469. 		$table.find("#inputa3").data("data",{"list":[{"value":"1","key":"北京"},{"value":"2","key":"黑龙江"}]});
    470. 

  470. 		$table.find("#inputa3").render();
    471. 

  471. 		$table.find("#inputa4").render();
    472. 

  472. 		$table.find("#inputa5").render();
    473. 

  473. 		
    474. 

  474. 		$table.validationEngine({showOnMouseOver:false});
    475. 

  475. 	}
    476. 

  476. 	
    477. 

  477. 	//"是否愿意留下邮箱"值变化
    478. 

  478. 	function emailChange(){
    479. 

  479. 	    var checked = $('#myCheck').attr('checked');
    480. 

  480. 	    if(checked){
    481. 

  481. 	        $("#emailInput").addClass("validate[required]");
    482. 

  482. 	        $("#emailTip").html("*");
    483. 

  483. 	    }else{
    484. 

  484. 	        $("#emailInput").removeClass("validate[required]");
    485. 

  485. 	        $("#emailTip").html("");
    486. 

  486. 	    }
    487. 

  487. 	    //调用校验方法，使文本框显示的样式及提示正确
    488. 

  488. 	    $("#emailContainer").validationEngine({returnIsValid: true,showOnMouseOver:false});
    489. 

  489. 	}
    490. 

  490. 	
    491. 

  491. 	function ajaxHander(){
    492. 

  492. 		var valid = $("#form3").validationEngine({returnIsValid: true,showOnMouseOver:false});
    493. 

  493. 		if(valid){
    494. 

  494. 			top.Dialog.alert("验证通过，此处是提交表单的处理!");
    495. 

  495. 		}
    496. 

  496. 	}
    497. 

  497. 	
    498. 

  498. 	function func1(){
    499. 

  499. 		if(Number($("#input1").val())<50){
    500. 

  500. 		return true;
    501. 

  501. 		}
    502. 

  502. 		return false;
    503. 

  503. 	}
    504. 

  504. 

  505. </script>
    506. 

  506. 

  507. </body>
    508. 

  508. </html>
    509.