Startsida Utforska Hjälp
Registrera dig Logga in
wangdaping
/
wp
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Gren: master
Grenar Taggar
wp
/
nwyj
/
.svn
/
pristine
/
5d
/
5ded45ba0dca42372a0b0ddb22c8d25ff8c0c13b.svn-base

5ded45ba0dca42372a0b0ddb22c8d25ff8c0c13b.svn-base 21 KB
Permalänk Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    2. 

  2. <% 
    3. 

  3. 	String path = request.getContextPath();
    4. 

  4. %>
    5. 

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

  6. <html xmlns="http://www.w3.org/1999/xhtml">
    7. 

  7. <head>
    8. 

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

  9. <title>表单验证</title>
    10. 

  10. 

  11. <!-- 框架必需start -->
    12. 

  12. <script type="text/javascript" src="<%=path%>/libs/js/jquery.js"></script>
    13. 

  13. <script type="text/javascript" src="<%=path%>/libs/js/language/cn.js"></script>
    14. 

  14. <script type="text/javascript" src="<%=path%>/libs/js/framework.js"></script>
    15. 

  15. <link href="<%=path%>/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    16. 

  16. <link rel="stylesheet" type="text/css" id="skin" prePath="<%=path%>/"/>
    17. 

  17. <link rel="stylesheet" type="text/css" id="customSkin"/>
    18. 

  18. <!-- 框架必需end -->
    19. 

  19. 

  20. <!-- 树组件start -->
    21. 

  21. <script type="text/javascript" src="<%=path%>/libs/js/tree/ztree/ztree.js"></script>
    22. 

  22. <link type="text/css" rel="stylesheet" href="<%=path%>/libs/js/tree/ztree/ztree.css"></link>
    23. 

  23. <!-- 树组件end -->
    24. 

  24. 

  25. <!-- 树形下拉框start -->
    26. 

  26. <script type="text/javascript" src="<%=path%>/libs/js/form/selectTree.js"></script>
    27. 

  27. <!-- 树形下拉框end -->
    28. 

  28. 

  29. <!-- 日期控件start -->
    30. 

  30. <script type="text/javascript" src="<%=path%>/libs/js/form/datePicker/WdatePicker.js"></script>
    31. 

  31. <!-- 日期控件end -->
    32. 

  32. 

  33. <!-- 条件过滤器 start -->
    34. 

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

  35. <!-- 条件过滤器 end -->
    36. 

  36. 

  37. <!-- 数字步进器start -->
    38. 

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

  39. <!-- 数字步进器end -->
    40. 

  40. 

  41. <!-- 软键盘控件start -->
    42. 

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

  43. <!-- 软键盘控件end -->
    44. 

  44. 

  45. <!-- 双向选择器start -->
    46. 

  46. <script type="text/javascript" src="<%=path%>/libs/js/form/lister.js"></script>
    47. 

  47. <!-- 双向选择器end -->
    48. 

  48. 

  49. <!--自动提示框start-->
    50. 

  50. <script type='text/javascript' src='<%=path%>/libs/js/form/suggestion.js'></script>
    51. 

  51. <!--自动提示框end-->
    52. 

  52. 

  53. <!-- 树形双选器start -->
    54. 

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

  55. <!-- 树形双选器end -->
    56. 

  56. 

  57. <!-- 组合下拉框start -->
    58. 

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

  59. <!-- 组合拉框end -->
    60. 

  60. 

  61. <!-- 表单验证start -->
    62. 

  62. <script src="<%=path%>/libs/js/form/validationRule.js" type="text/javascript"></script>
    63. 

  63. <script src="<%=path%>/libs/js/form/validation.js" type="text/javascript"></script>
    64. 

  64. <!-- 表单验证end -->
    65. 

  65. 

  66. 

  67. </head>
    68. 

  68. <body>
    69. 

  69.  <div class="box1">
    70. 

  70.     <fieldset>
    71. 

  71.       <legend>1、基本使用</legend>
    72. 

  72.    <form id="form1" method="post" action="" failAlert="表单填写不正确，请按要求填写！">
    73. 

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

  74. 		<tr>
    75. 

  75. 			<th colspan="4">表单填写</th>
    76. 

  76. 		</tr>
    77. 

  77. 		<tr>
    78. 

  78. 			<td width="150">用户名：</td><td width="300"><input type="text" class="validate[required,custom[noSpecialCaracters]]" watermark="请输入英文或数字"/><span class="star">*</span></td>
    79. 

  79. 			<td width="150">姓名：</td><td width="300"><input type="text" class="validate[required,custom[chinese],length[0,20]]"/><span class="star">*</span></td>
    80. 

  80. 		</tr>
    81. 

  81. 		<tr>	
    82. 

  82. 			<td>密码：</td><td><input type="password" id="pwd" class="validate[required,length[6,11],custom[noSpecialCaracters]]"/><span class="star">*</span> </td>
    83. 

  83. 			<td>密码确认：</td><td><input type="password" class="validate[required,confirm[pwd]]"/><span class="star">*</span></td>
    84. 

  84. 		</tr>
    85. 

  85. 		<tr>
    86. 

  86. 			<td>爱好：</td><td>
    87. 

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

  88. 			<input type="checkbox" id="checkbox-2" class="validate[minCheckbox[1]] checkbox" name="ck1" value="选项2" /><label for="checkbox-2" class="hand">跳舞</label> <span class="star">*</span></div>
    89. 

  89. 			</td>
    90. 

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

  91. 			<td><div style="width:135px;" class="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> <span class="star">*</span></div>
    93. 

  93. 			</td>
    94. 

  94. 		</tr>
    95. 

  95. 		<tr>
    96. 

  96. 			<td>年龄：</td><td><input type="text" watermark="请输入数字" class="validate[required,custom[onlyNumber],length[0,3]]"/><span class="star">*</span></td>
    97. 

  97. 			<td>电子邮件：</td>
    98. 

  98. 			<td>
    99. 

  99. 				<input type="text" class="validate[required,custom[email]]"/><span class="star">*</span>
    100. 

  100. 				
    101. 

  101. 			</td>
    102. 

  102. 		</tr>
    103. 

  103. 		<tr>
    104. 

  104. 			<td>固定电话：</td><td><input type="text" class=" validate[required,custom[telephone]]"/><span class="star">*</span></td>
    105. 

  105. 			<td>英文名：</td><td><input type="text" class="validate[required,custom[onlyLetter]]"/><span class="star">*</span></td>
    106. 

  106. 		</tr>
    107. 

  107. 		
    108. 

  108. 		<tr>
    109. 

  109. 			<td>手机号码：</td><td><input type="text" class=" validate[required,custom[mobilephone]]"/><span class="star">*</span></td>
    110. 

  110. 			<td>邮政编码：</td><td><input type="text" class=" validate[required,custom[zipcode]]"/><span class="star">*</span></td>
    111. 

  111. 		</tr>
    112. 

  112. 		<tr>
    113. 

  113. 			<td>QQ：</td><td><input type="text" class=" validate[required,custom[qq]]"/><span class="star">*</span></td>
    114. 

  114. 			<td>非法字符：</td>
    115. 

  115. 			<td>
    116. 

  116. 			<input type="text" class=" validate[required,custom[illegalLetter]]"/><span class="star">*</span>
    117. 

  117. 			</td>
    118. 

  118. 		</tr>
    119. 

  119. 		<tr>
    120. 

  120. 			<td>IP地址：</td><td><input type="text" class=" validate[required,custom[ip]]"/><span class="star">*</span></td>
    121. 

  121. 			<td>非负整数：</td><td><input type="text" class=" validate[required,custom[onlyNumber]]"/><span class="star">*</span></td>
    122. 

  122. 		</tr>
    123. 

  123. 		<tr>
    124. 

  124. 			<td>正负小数：</td><td><input type="text" class=" validate[required,custom[onlyDecimal]]"/><span class="star">*</span></td>
    125. 

  125. 			<td>正负整数与小数：</td><td><input type="text" class=" validate[required,custom[onlyNumberWide]]"/><span class="star">*</span></td>
    126. 

  126. 		</tr>
    127. 

  127. 		<tr>
    128. 

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

  129. 			<td>树形单选下拉框：</td><td><div class="selectTree validate[required]" 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">*</span>	</td>
    130. 

  130. 		</tr>
    131. 

  131. 		<tr>
    132. 

  132. 			<td>多选下拉框：</td><td><div class="selectTree validate[required]" 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">*</span>	</td>
    133. 

  133. 			<td>树形多选下拉框：</td><td><div class="selectTree validate[required]" 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">*</span>	</td>
    134. 

  134. 		</tr>
    135. 

  135. 		<tr>
    136. 

  136. 			<td>数字步进器：</td><td><input id="step1" type="text" class="stepper validate[required]"/><span class="star">*</span>	</td>
    137. 

  137. 			<td>软键盘控件：</td><td><input class="keypad validate[required]" type="text"/><span class="star">*</span></td>
    138. 

  138. 		</tr>
    139. 

  139. 		<tr>
    140. 

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

  141. 			<td>日期选择框：</td><td><input type="text" class="date validate[required,custom[date]]"/><span class="star">*</span></td>
    142. 

  142. 		</tr>
    143. 

  143. 		<tr>
    144. 

  144. 			<td>条件过滤器：</td>
    145. 

  145. 			<td colspan="3">
    146. 

  146. 			<div class="float_left">
    147. 

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

  148. 			</div>
    149. 

  149. 			<div class="float_left padding_top5">
    150. 

  150. 				<span class="star float_left">*</span>	
    151. 

  151. 			</div>
    152. 

  152. 			<div class="clear"></div>		
    153. 

  153. 			</td>
    154. 

  154. 		</tr>
    155. 

  155. 		<tr>
    156. 

  156. 			<td>双向选择器：</td>
    157. 

  157. 			<td colspan="3">
    158. 

  158. 			<div class="float_left">
    159. 

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

  160. 			</div>
    161. 

  161. 			<div class="float_left" style="padding:90px 0 0 0;">
    162. 

  162. 				<span class="star float_left">*</span>	
    163. 

  163. 			</div>
    164. 

  164. 			<div class="clear"></div>		
    165. 

  165. 			</td>
    166. 

  166. 		</tr>
    167. 

  167. 		<tr>
    168. 

  168. 			<td>树形双选器：</td>
    169. 

  169. 			<td colspan="3">
    170. 

  170. 			<div class="float_left">
    171. 

  171. 			<div class="listerTree validate[required]" 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>
    172. 

  172. 			</div>
    173. 

  173. 			<div class="float_left" style="padding:80px 0 0 0;">
    174. 

  174. 				<span class="star float_left">*</span>	
    175. 

  175. 			</div>
    176. 

  176. 			<div class="clear"></div>		
    177. 

  177. 			</td>
    178. 

  178. 		</tr>
    179. 

  179. 		<tr>
    180. 

  180. 			<td>文本域：</td>
    181. 

  181. 			<td colspan="3">
    182. 

  182. 			<div class="float_left">
    183. 

  183. 			<textarea class="validate[required]" style="width:350px;"></textarea>
    184. 

  184. 			</div>
    185. 

  185. 			<div class="float_left" style="padding:40px 0 0 0;">
    186. 

  186. 				<span class="star float_left">*</span>	
    187. 

  187. 			</div>
    188. 

  188. 			<div class="clear"></div>		
    189. 

  189. 			</td>
    190. 

  190. 		</tr>
    191. 

  191. 		<tr>
    192. 

  192. 			<td>组合下拉框：</td>
    193. 

  193. 			<td colspan="3">
    194. 

  194. 			<div class="selectCustom validate[required]" boxWidth="380" prompt="请选择一种格式" id="selectCostom5">
    195. 

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

  196. 				<div class="navIconSmall" id="MP3">
    197. 

  197. 					<img src="<%=path%>/libs/icons/png/16.png"/><br />
    198. 

  198. 					MP3格式
    199. 

  199. 				</div>
    200. 

  200. 				<div class="navIconSmall" id="WMA">
    201. 

  201. 					<img src="<%=path%>/libs/icons/png/21.png"/><br />
    202. 

  202. 					WMA格式
    203. 

  203. 				</div>
    204. 

  204. 				<div class="navIconSmall" id="AVI">
    205. 

  205. 					<img src="<%=path%>/libs/icons/png/25.png"/><br />
    206. 

  206. 					AVI格式
    207. 

  207. 				</div>
    208. 

  208. 				<div class="navIconSmall" id="WAVE">
    209. 

  209. 					<img src="<%=path%>/libs/icons/png/24.png"/><br />
    210. 

  210. 					WAVE格式
    211. 

  211. 				</div>
    212. 

  212. 				<div class="navIconSmall" id="MIDI">
    213. 

  213. 					<img src="<%=path%>/libs/icons/png/30.png"/><br />
    214. 

  214. 					MIDI格式
    215. 

  215. 				</div>
    216. 

  216. 				<div class="navIconSmall" id="MPEG">
    217. 

  217. 					<img src="<%=path%>/libs/icons/png/29.png"/><br />
    218. 

  218. 					MPEG格式
    219. 

  219. 				</div>
    220. 

  220. 				<div class="navIconSmall" id="TIF">
    221. 

  221. 					<img src="<%=path%>/libs/icons/png/22.png"/><br />
    222. 

  222. 					TIF格式
    223. 

  223. 				</div>
    224. 

  224. 				<div class="navIconSmall" id="PNG">
    225. 

  225. 					<img src="<%=path%>/libs/icons/png/23.png"/><br />
    226. 

  226. 					PNG格式
    227. 

  227. 				</div>
    228. 

  228. 				<div class="navIconSmall" id="JPEG">
    229. 

  229. 					<img src="<%=path%>/libs/icons/png/33.png"/><br />
    230. 

  230. 					JPEG格式
    231. 

  231. 				</div>
    232. 

  232. 				<div class="navIconSmall" id="TGA">
    233. 

  233. 					<img src="<%=path%>/libs/icons/png/15.png" width="60" height="60"/><br />
    234. 

  234. 					TGA格式
    235. 

  235. 				</div>
    236. 

  236. 				<div class="navIconSmall" id="GIF">
    237. 

  237. 					<img src="<%=path%>/libs/icons/png/33.png"/><br />
    238. 

  238. 					GIF格式
    239. 

  239. 				</div>
    240. 

  240. 				<div class="navIconSmall" id="BMP">
    241. 

  241. 					<img src="<%=path%>/libs/icons/png/37.png"/><br />
    242. 

  242. 					BMP格式
    243. 

  243. 				</div>
    244. 

  244. 				<div class="clear"></div>			
    245. 

  245. 			</div>
    246. 

  246. 		</div>
    247. 

  247. 				<span class="star">*</span>	
    248. 

  248. 			</td>
    249. 

  249. 			<tr>
    250. 

  250. 			<td>同步上传控件：</td>
    251. 

  251. 			<td colspan="3">
    252. 

  252. 			<div class="float_left">
    253. 

  253. 			<input type="file"   showInfo="false"  class="validate[required,custom[onlyImage]]"/>
    254. 

  254. 			</div>
    255. 

  255. 			<div class="float_left" style="padding:5px 0 0 0;">
    256. 

  256. 				<span class="star float_left">*</span>	(可验证文件格式)
    257. 

  257. 			</div>
    258. 

  258. 			<div class="clear"></div>		
    259. 

  259. 			</td>
    260. 

  260. 		</tr>
    261. 

  261. 		<tr>
    262. 

  262. 			<td colspan="4">
    263. 

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

  264. 				<input type="button" value=" 重 置 "/>
    265. 

  265. 			</td>
    266. 

  266. 		</tr>
    267. 

  267. 	 </table>
    268. 

  268.   </form>
    269. 

  269.  </fieldset>
    270. 

  270.   <div class="height_15"></div>
    271. 

  271.   
    272. 

  272.   <fieldset>
    273. 

  273.       <legend>2、手动触发验证</legend>
    274. 

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

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

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

  277.       <p>
    278. 

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

  279.       </p>
    280. 

  280.   </fieldset>
    281. 

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

  282.   
    283. 

  283.    <fieldset>
    284. 

  284.       <legend>3、ajax验证</legend>
    285. 

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

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

  287.        <form id="form3" method="post" action="" failAlert="验证未通过！">
    288. 

  288.        		<table style="width:400px;" class="tableStyle" formMode="transparent">
    289. 

  289.        		<tr>
    290. 

  290. 				<td width="100">用户名：</td><td><input type="text" class="validate[required,custom[noSpecialCaracters],ajax[<%=path%>/validateUserName.action|* 用户名已存在!]]"/><span class="star">*</span></td>
    291. 

  291. 			</tr>
    292. 

  292. 			<tr>
    293. 

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

  294. 			</tr>
    295. 

  295.        		 </table>
    296. 

  296.        </form>
    297. 

  297.   </fieldset>
    298. 

  298.   <div class="height_15"></div>
    299. 

  299.   
    300. 

  300.   <fieldset>
    301. 

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

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

  303.   </fieldset>
    304. 

  304.   <div class="height_15"></div>
    305. 

  305.   
    306. 

  306.   <fieldset>
    307. 

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

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

  309.       <form id="form4" method="post" action="" failAlert="请将表单填写完整！">
    310. 

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

  311. 			<tr>
    312. 

  312. 				<th colspan="2">表单填写</th>
    313. 

  313. 			</tr>
    314. 

  314. 			<tr>
    315. 

  315. 				<td width="200">用户名：</td>
    316. 

  316. 				<td><input type="text" class="validate[required,custom[noSpecialCaracters]]"/><span class="star">*</span></td>
    317. 

  317. 			</tr>
    318. 

  318. 			<tr>
    319. 

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

  320. 			</tr>
    321. 

  321. 			<tr>
    322. 

  322. 				<td>电子邮件：</td><td id="emailContainer"><input type="text" id="emailInput" class="validate[custom[email]]"/><span id="emailTip" class="star"></span></td>
    323. 

  323. 			</tr>
    324. 

  324. 			<tr>
    325. 

  325. 				<td colspan="2">
    326. 

  326. 					<input type="submit" value=" 提 交 "/>
    327. 

  327. 					<input type="reset" value=" 重 置 "/>
    328. 

  328. 				</td>
    329. 

  329. 			</tr>
    330. 

  330. 		</table>
    331. 

  331. 	</form>	
    332. 

  332.   </fieldset>
    333. 

  333.    <div class="height_15"></div>
    334. 

  334.    
    335. 

  335.    <fieldset>
    336. 

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

  337.      此例中，不允许输入admin<br/>
    338. 

  338.       <form id="form4" method="post" action="" >
    339. 

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

  340. 			<tr>
    341. 

  341. 				<th colspan="2">表单填写</th>
    342. 

  342. 			</tr>
    343. 

  343. 			<tr>
    344. 

  344. 				<td width="200">用户名：</td>
    345. 

  345. 				<td><input type="text" class="validate[required,exemptString[admin|不允许输入admin]]"/><span class="star">*</span></td>
    346. 

  346. 			</tr>
    347. 

  347. 			<tr>
    348. 

  348. 				<td colspan="2">
    349. 

  349. 					<input type="submit" value=" 提 交 "/>
    350. 

  350. 					<input type="reset" value=" 重 置 "/>
    351. 

  351. 				</td>
    352. 

  352. 			</tr>
    353. 

  353. 		</table>
    354. 

  354. 	</form>	
    355. 

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

  356.   </fieldset>
    357. 

  357.    <div class="height_15"></div>
    358. 

  358.    
    359. 

  359.    <fieldset>
    360. 

  360.       <legend>7、页面添加验证函数</legend>
    361. 

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

  362.       <form id="form4" method="post" action="" >
    363. 

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

  364. 			<tr>
    365. 

  365. 				<th colspan="2">表单填写</th>
    366. 

  366. 			</tr>
    367. 

  367. 			<tr>
    368. 

  368. 				<td width="200">金额：</td>
    369. 

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

  370. 			</tr>
    371. 

  371. 			<tr>
    372. 

  372. 				<td colspan="2">
    373. 

  373. 					<input type="submit" value=" 提 交 "/>
    374. 

  374. 					<input type="reset" value=" 重 置 "/>
    375. 

  375. 				</td>
    376. 

  376. 			</tr>
    377. 

  377. 		</table>
    378. 

  378. 	</form>	
    379. 

  379. 	此方式有两个特点：<br/>
    380. 

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

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

  382.   </fieldset>
    383. 

  383.   
    384. 

  384.  
    385. 

  385.  </div>
    386. 

  386. 

  387. 

  388. <script type="text/javascript">
    389. 

  389. 	var listdata={"list":[
    390. 

  390. 		{value:"1",key:"北京",suggest:"北京|beijing|bj"},
    391. 

  391. 		{value:"2",key:"广州",suggest:"广州|guangzhou|gz"},
    392. 

  392. 		{value:"3",key:"深圳",suggest:"深圳|shenzhen|sz"},
    393. 

  393. 		{value:"4",key:"上海",suggest:"上海|shanghai|sh"},
    394. 

  394. 		{value:"5",key:"长沙",suggest:"长沙|changsha|cs"},
    395. 

  395. 		{value:"6",key:"成都",suggest:"成都|chengdu|cd"},
    396. 

  396. 		{value:"7",key:"贵阳",suggest:"贵阳|guiyang|gy"},
    397. 

  397. 		{value:"8",key:"海口",suggest:"海口|haikou|hk"},
    398. 

  398. 		{value:"9",key:"杭州",suggest:"杭州|hangzhou|hz"},
    399. 

  399. 		{value:"10",key:"昆明",suggest:"昆明|kunming|km"},
    400. 

  400. 		{value:"11",key:"南昌",suggest:"南昌|nanchang|nc"},
    401. 

  401. 		{value:"12",key:"南京",suggest:"南京|nanjing|nj"},
    402. 

  402. 		{value:"13",key:"三亚",suggest:"三亚|sanya|sy"},
    403. 

  403. 		{value:"14",key:"沈阳",suggest:"沈阳|shenyang|sy"},
    404. 

  404. 		{value:"15",key:"温州",suggest:"温州|wenzhou|wz"},
    405. 

  405. 		{value:"16",key:"武汉",suggest:"武汉|wuhan|wh"},
    406. 

  406. 		{value:"17",key:"厦门",suggest:"厦门|xiamen|xm"},
    407. 

  407. 		{value:"18",key:"西安",suggest:"西安|xian|xa"},
    408. 

  408. 		{value:"19",key:"郑州",suggest:"郑州|zhenghou|zz"},
    409. 

  409. 		{value:"20",key:"汕头",suggest:"汕头|shantou|st"},
    410. 

  410. 		{value:"21",key:"太原",suggest:"太原|taiyuan|ty"},
    411. 

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

  412. 	$(function(){
    413. 

  413. 		 $("#suggestion1").data("data",listdata);
    414. 

  414. 		 $("#suggestion1").render();
    415. 

  415. 		 
    416. 

  416. 		 $(".navIconSmall").each(function(){
    417. 

  417.             	$(this).hover(function(){
    418. 

  418. 					$(this).addClass("navIconSmall_hover");
    419. 

  419. 				},function(){
    420. 

  420. 					$(this).removeClass("navIconSmall_hover");
    421. 

  421. 				})
    422. 

  422. 				$(this).click(function(){
    423. 

  423. 					$(".navIconSmall").removeClass("navIconSmall_current");
    424. 

  424. 	            	$(this).addClass("navIconSmall_current");
    425. 

  425. 	            	$("#selectCostom5").setValue($(this).attr("id"),$(this).text().trim());
    426. 

  426. 				})
    427. 

  427.             })
    428. 

  428. 	})
    429. 

  429. 	
    430. 

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

  431. 	function validateForm(containerId){
    432. 

  432. 	    var valid = $(containerId).validationEngine({returnIsValid: true});
    433. 

  433. 		if(valid == true){
    434. 

  434. 			top.Dialog.alert('进行提交处理');
    435. 

  435. 		}else{
    436. 

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

  437. 		} 
    438. 

  438. 	} 
    439. 

  439. 	
    440. 

  440. 	function addNewForm(){
    441. 

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

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

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

  444. 		'<tr><td>用户名：</td><td><input type="text" id="inputa1" class="validate[required,custom[noSpecialCaracters]]" /><span class="star">*</span></td></tr>'+
    445. 

  445. 		'<tr><td>密码：</td><td><input type="password" id="inputa2" class="validate[required,length[6,11],custom[noSpecialCaracters]]"/><span class="star">*</span></td></tr>	'+
    446. 

  446. 		'<tr><td>籍贯：</td><td><select id="inputa3" class="validate[required]" prompt="请选择"></select><span class="star">*</span></td></tr>'+
    447. 

  447. 		'<tr><td colspan="2"><input type="submit" value="提交" id="inputa4"/>&nbsp;<input type="reset" value="重置" id="inputa5"/></td></tr>'+
    448. 

  448. 	'</table></form>')
    449. 

  449. 		$("#testBtn").after($table); 
    450. 

  450. 		$table.find("table").render();
    451. 

  451. 		$table.find("#inputa1").render();
    452. 

  452. 		$table.find("#inputa2").render();
    453. 

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

  454. 		$table.find("#inputa3").render();
    455. 

  455. 		$table.find("#inputa4").render();
    456. 

  456. 		$table.find("#inputa5").render();
    457. 

  457. 		
    458. 

  458. 		$table.validationEngine();
    459. 

  459. 	}
    460. 

  460. 	
    461. 

  461. 	//"是否愿意留下邮箱"值变化
    462. 

  462. 	function emailChange(){
    463. 

  463. 	    var checked = $('#myCheck').attr('checked');
    464. 

  464. 	    if(checked){
    465. 

  465. 	        $("#emailInput").addClass("validate[required]");
    466. 

  466. 	        $("#emailTip").html("*");
    467. 

  467. 	    }else{
    468. 

  468. 	        $("#emailInput").removeClass("validate[required]");
    469. 

  469. 	        $("#emailTip").html("");
    470. 

  470. 	    }
    471. 

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

  472. 	    $("#emailContainer").validationEngine({returnIsValid: true});
    473. 

  473. 	}
    474. 

  474. 	
    475. 

  475. 	function ajaxHander(){
    476. 

  476. 		var valid = $("#form3").validationEngine({returnIsValid: true});
    477. 

  477. 		if(valid){
    478. 

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

  479. 		}
    480. 

  480. 	}
    481. 

  481. 	
    482. 

  482. 	function func1(){
    483. 

  483. 		if(Number($("#input1").val())<50){
    484. 

  484. 		return true;
    485. 

  485. 		}
    486. 

  486. 		return false;
    487. 

  487. 	}
    488. 

  488. 

  489. </script>
    490. 

  490. 

  491. </body>
    492. 

  492. </html>
    493.