做个笔记，以后直接用吧。

报名界面：

  1. <%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
  2. <%@ include file="/public/taglibs.jsp"%>
  3. <%@ include file="/public/artDialog.jsp"%>
  4. <html>
  5. <head>
  6. <title>${webname}-报名界面</title>
  7. <%@ include file="/public/meta.jsp"%>
  8. <script type="text/javascript" src="/js/common/Data_location.js"></script>
  9. <script type="text/javascript" src="/js/common/Data_folk.js"></script>
  10. <script type="text/javascript" src="/js/common/Data_edu.js"></script>
  11. <script type="text/javascript" src="/js/common/Data_depart.js"></script>
  12. <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
  13. <link rel="stylesheet" href="/js/jquery/plugins/validform/style.css" type="text/css" media="all" />
  14. <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" />
  15. <style type="text/css">
  16. #area_td select {
  17. width: 115px;
  18. }
  19. </style>
  20. <script type="text/javascript">
  21. //DOM加载完成后即初始化动态数据，代替onload避免图片加载时的等待
  22. $(document).ready(function() {
  23. init();
  24. });
  25. function init(){
  26. getAllDps();
  27. getAllFolks();
  28. getAllEducations();
  29. getAllProvs();//查询省
  30. }
  31. function getAllEducations(){
  32. for(var index in location_edus){
  33. var edu = location_edus[index];
  34. $("#education").append("<option value="+edu.id+" >"+edu.n+"</option>");
  35. }
  36. }
  37. function getAllFolks(){
  38. for(var index in location_folks){
  39. var folk = location_folks[index];
  40. $("#folk").append("<option value="+folk.id+" >"+folk.n+"</option>");
  41. }
  42. }
  43. function getAllDps(){
  44. for(var index in location_departs){
  45. var depart = location_departs[index];
  46. $("#dp").append("<option value="+depart.id+" >"+depart.n+"</option>");
  47. }
  48. }
  49. function getAllProvs(currentcode){
  50. for(var index in location_provs){
  51. var prov = location_provs[index];
  52. $("#prov").append("<option value="+prov.c+" >"+prov.n+"</option>");
  53. }
  54. }
  55. function getCitiesByProvCode(currentcode){
  56. var provcode=$("#prov option:selected").val();
  57. $("#area").empty();
  58. $("#area").append("<option value=\"-1\" >请选择</option>");
  59. $("#city").empty();
  60. $("#city").append("<option value=\"-1\" >请选择</option>");
  61. for(var index in location_cities){
  62. var city = location_cities[index];
  63. if(city.p==provcode){
  64. var s='';
  65. if(currentcode==city.c){
  66. s='selected="selected"';
  67. }
  68. $("#city").append("<option "+s+" value="+city.c+" >"+city.n+"</option>");
  69. }
  70. }
  71. }
  72. function getAreasByCityCode(currentcode){
  73. var citycode=$("#city option:selected").val();
  74. $("#area").empty();
  75. $("#area").append("<option value=\"-1\" >请选择</option>");
  76. for(var index in location_areas){
  77. var area = location_areas[index];
  78. if(area.p==citycode){
  79. var s='';
  80. if(currentcode==area.c){
  81. s='selected="selected"';
  82. }
  83. $("#area").append("<option "+s+" value="+area.c+" >"+area.n+"</option>");
  84. }
  85. }
  86. }
  87. </script>
  88. </head>
  89. <body>
  90. <div class="container">
  91. <div id="topmenu">
  92. <IFRAME NAME="topm" width=100% height="217px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/head.html" scrolling=no
  93. allowTransparency="true"></IFRAME>
  94. </div>
  95. <div class="centent_zxzc">
  96. <div class="left_zxzc">
  97. <p>
  98. 右侧表格中带*是必填项；已注册用户请勿重复注册，您的
  99. <span class="red">默认密码为：111111</span>，请您登陆后修改密码，忘记密码请联系我们。请您务必准确填写各项信息，信息的准确度将直接影响您的报名资质及后期发票、学习资料和结业证书送达工作。
  100. </p>
  101. </div>
  102. <div class="right_zxzc">
  103. <div class="zxzc_title">
  104. <img src="../images/zxzc_03.gif">
  105. </div>
  106. <form action="/register/peBzzRec_register.action" method="post" class="registerfrm">
  107. <table class="datalist3" cellpadding="0" cellspacing="0" width="680">
  108. <tr>
  109. <td width="80" rowspan="7" align="center" bgcolor="#f3f3f3">
  110. 个人信息
  111. </td>
  112. <td width="60">
  113. <span class="redfont">*</span>用户名
  114. </td>
  115. <td class="lefttd">
  116. <input type="text" name="peBzzRecruit.ssoUser.userName" ajaxurl="/register/peBzzRec_checkUsername.action" id="loginId" class="inputxt"
  117. datatype="u3-19" errormsg="用户名4-20个汉字、字母、下划线和数字！" maxlength="30" size="30" />
  118. <span class="Validform_checktip">用于登录名。长度为4-20，只能输入字母、数字和下划线</span>
  119. </td>
  120. </tr>
  121. <tr>
  122. <td>
  123. <span class="redfont">*</span>密  码
  124. </td>
  125. <td class="lefttd">
  126. <input type="text" value="111111" readonly="readonly" size="30" maxlength="25" />
  127. <span class="Validform_checktip">默认密码：6个1。请您牢记密码！登录后可修改。</span>
  128. </td>
  129. </tr>
  130. <tr>
  131. <td>
  132. <span class="redfont">*</span>姓  名
  133. </td>
  134. <td class="lefttd">
  135. <input type="text" name="peBzzRecruit.name" id="name" class="inputxt" datatype="t2-15" errormsg="姓名2-15个汉字、字母、下划线和数字！" maxlength="30"
  136. size="30" />
  137. <span class="Validform_checktip">请填写您的真实姓名，用于证书发放</span>
  138. </td>
  139. </tr>
  140. <tr>
  141. <td>
  142. <span class="redfont">*</span>性  别
  143. </td>
  144. <td class="lefttd">
  145. <select name="peBzzRecruit.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;">
  146. <option value="">
  147. --- 请选择性别---
  148. </option>
  149. <option value="402880911da481e0011da4963df60004">
  150. 男
  151. </option>
  152. <option value="402880911da481e0011da49697130005">
  153. 女
  154. </option>
  155. </select>
  156. <span class="Validform_checktip"></span>
  157. </td>
  158. </tr>
  159. <tr>
  160. <td>
  161. <span class="redfont"></span>民  族
  162. </td>
  163. <td class="lefttd">
  164. <SELECT id="folk" name="peBzzRecruit.enumConstByFlagFolk.id" style="width: 175px;">
  165. <OPTION value="-1">
  166. --- 请选择民族---
  167. </OPTION>
  168. </SELECT>
  169. <span class="Validform_checktip"></span>
  170. </td>
  171. </tr>
  172. <tr>
  173. <td>
  174. <span class="redfont">*</span>出生日期
  175. </td>
  176. <td class="lefttd">
  177. <input type="text" name="peBzzRecruit.birthdayDate" datatype="*" id="birthday" readonly="readonly"
  178. onClick="WdatePicker({maxDate:'%y-%M-%d'})" size="30" />
  179. <span class="Validform_checktip">请选择您的真实出生日期，用于证书发放。</span>
  180. </td>
  181. </tr>
  182. <tr>
  183. <td>
  184. <span class="redfont">*</span>学  历
  185. </td>
  186. <td class="lefttd">
  187. <select id="education" name="peBzzRecruit.enumConstByFlagEducation.id" datatype="*" nullmsg="请选择学历" style="width: 175px;">
  188. <option value="">
  189. --- 请选择学历---
  190. </option>
  191. </select>
  192. <span class="Validform_checktip"></span>
  193. </td>
  194. </tr>
  195. <tr>
  196. <td width="50" rowspan="9" align="center" bgcolor="#f3f3f3">
  197. 通讯信息
  198. </td>
  199. <td>
  200. <span class="redfont">*</span>工作单位
  201. </td>
  202. <td class="lefttd">
  203. <input type="text" name="peBzzRecruit.department" id="depart" class="inputxt" datatype="t4-25" errormsg="工作单位4-25个汉字、字母、下划线和数字！"
  204. maxlength="50" size="30" />
  205. <span class="Validform_checktip">工作单位4-25个汉字、字母、下划线和数字</span>
  206. </td>
  207. </tr>
  208. <tr>
  209. <td>
  210. <span class="redfont"></span>职称职务
  211. </td>
  212. <td class="lefttd">
  213. <input type="text" name="peBzzRecruit.position" id="position" class="inputxt" ignore="ignore" datatype="t2-15"
  214. errormsg="职称2-15个汉字、字母、下划线和数字！" maxlength="30" size="30" />
  215. <span class="Validform_checktip">职称2-15个字符 </span>
  216. </td>
  217. </tr>
  218. <tr>
  219. <td>
  220. <span class="redfont">*</span>手  机
  221. </td>
  222. <td class="lefttd">
  223. <input type="text" name="peBzzRecruit.mobilePhone" id="mobilePhone" class="inputxt mobile" datatype="m" errormsg="手机号为11位有效号码！"
  224. maxlength="30" size="30" />
  225. <span class="Validform_checktip">请输入11位有效手机号，方便学习联系。</span>
  226. </td>
  227. </tr>
  228. <tr>
  229. <td>
  230. <span class="redfont">*</span>电  话
  231. </td>
  232. <td class="lefttd">
  233. <input type="text" name="peBzzRecruit.phone" id="phone" class="inputxt" datatype="c" errormsg="电话号码格式不正确！" maxlength="30" size="30" />
  234. <span class="Validform_checktip">例如：0712-7827881,58731118</span>
  235. </td>
  236. </tr>
  237. <tr>
  238. <td>
  239. 传  真
  240. </td>
  241. <td class="lefttd">
  242. <input type="text" ignore="ignore" name="peBzzRecruit.fax" id="fax" class="inputxt" datatype="c" errormsg="传真格式为0712-7827881或58731118！"
  243. maxlength="30" size="30" />
  244. <span class="Validform_checktip">和电话号码格式一致</span>
  245. </td>
  246. </tr>
  247. <tr>
  248. <td>
  249. <span class="redfont">*</span>Email
  250. </td>
  251. <td class="lefttd">
  252. <input type="text" name="peBzzRecruit.email" id="email" class="inputxt" datatype="e" errormsg="邮箱格式不正确！" maxlength="30" size="30" />
  253. <span class="Validform_checktip">请输入真实邮件地址，用于发送您的报名信息。</span>
  254. </td>
  255. </tr>
  256. <tr>
  257. <td>
  258. <span class="redfont">*</span>邮政编码
  259. </td>
  260. <td class="lefttd">
  261. <input type="text" ignore="ignore" name="peBzzRecruit.zipcode" id="zipcode" onkeypress="KeyPress(this.value);" class="inputxt" datatype="p"
  262. errormsg="邮政编码6个数字！" maxlength="30" size="30" />
  263. <span class="Validform_checktip">请输入6位邮政编码 </span>
  264. </td>
  265. </tr>
  266. <tr>
  267. <td>
  268. <span class="redfont">*</span>所在地区
  269. </td>
  270. <td class="lefttd" id="area_td" colspan="3">
  271. <select id="prov" name="provcode" onchange="getCitiesByProvCode();" datatype="city">
  272. <option value="-1">
  273. 请选择
  274. </option>
  275. </select>
  276. <select id="city" name="citycode" onchange="getAreasByCityCode();" style="margin-left: 20px;" datatype="city">
  277. <option value="-1">
  278. 请选择
  279. </option>
  280. </select>
  281. <select id="area" name="peBzzRecruit.peEnterprise.code" style="margin-left: 20px;" datatype="city">
  282. <option value="-1">
  283. 请选择
  284. </option>
  285. </select>
  286. <span class="Validform_checktip"></span>
  287. </td>
  288. </tr>
  289. <tr>
  290. <td>
  291. <span class="redfont">*</span>详细地址
  292. </td>
  293. <td class="lefttd" colspan="3">
  294. <input type="text" name="peBzzRecruit.address" id="address" maxlength="25" size="30" class="inputxt" datatype="t4-25"
  295. errormsg="地址4-25个汉字、字母、下划线和数字！" maxlength="30" />
  296. <span class="Validform_checktip">上面选择省市，此处仅写除省市外的详细地址</span>
  297. </td>
  298. </tr>
  299. <tr>
  300. <td bgcolor="#f3f3f3">
  301. 单位属性
  302. </td>
  303. <td>
  304. <span class="redfont">*</span>单位属性
  305. </td>
  306. <td class="lefttd" colspan="2">
  307. <select id="dp" name="peBzzRecruit.enumConstByFlagDepartProperty.id" datatype="*" nullmsg="请选择单位属性" style="width: 175px;">
  308. <option value="">
  309. --- 请选择单位属性---
  310. </option>
  311. </select>
  312. <span class="Validform_checktip">请选择您的单位属性</span>
  313. </td>
  314. </tr>
  315. </table>
  316. <div style="padding-right: 200px;">
  317. <input style="display: none;" type="submit" value="提交" id="sub" />
  318. <input style="display: none;" type="reset" value="重填" id="res" />
  319. <div class="tijiao">
  320. <a href="javascript:void(0);" onclick="$('#res').click();">重填</a>
  321. </div>
  322. <div class="tijiao" id="subdiv">
  323. <a id="subbtn" href="javascript:void(0);" onclick="$('#sub').click();">提交</a>
  324. </div>
  325. <span id="msgdemo" style="margin-left: 30px;"></span>
  326. <br />
  327. <br />
  328. <br />
  329. </div>
  330. </form>
  331. </div>
  332. </div>
  333. <div id="bottommenu">
  334. <IFRAME NAME="bottomm" width=100% height="100px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/bottom.html" scrolling=no
  335. allowTransparency="true" align="center"></IFRAME>
  336. </div>
  337. </div>
  338. </body>
  339. <script type="text/javascript" src="/js/jquery/plugins/validform/Validform.js"></script>
  340. <script type="text/javascript">
  341. $(function() {
  342. var showmsg=function(msg){//假定你的信息提示方法为showmsg， 在方法里可以接收参数msg，当然也可以接收到o及cssctl;
  343. if(msg.stat=="y"){
  344. window.location.href=msg.url;
  345. }else if(msg.stat&&msg.stat!="undefined"){
  346. $("#subbtn").disabled="";//启用提交按钮，如果出现错误可以再次提交
  347. artAlert("在线报名失败，原因："+msg.stat,"e");
  348. }
  349. }
  350. $(".registerfrm").Validform({
  351. tiptype:function(msg,o,cssctl){
  352. if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
  353. //var objtip=$("#Validform_checktip");
  354. var objtip=o.obj.siblings(".Validform_checktip");//指定错误提示控件
  355. cssctl(objtip,o.type);
  356. objtip.text(msg);
  357. }else{//type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败
  358. if(o.type=="1"){
  359. $("#subbtn").disabled="disabled";//提交时禁用提交按钮
  360. }
  361. }
  362. },
  363. ajaxPost:true,
  364. callback:function(data){
  365. showmsg(data);
  366. },
  367. showAllError:true,//一次性提示所有错误，正式和测试可用
  368. datatype:{//传入自定义datatype类型
  369. "u2-4" : /^[0-9a-zA-Z]{1}\w{2,4}$/,//数字和字母开头，后面可以有下划线u2-4和后面的{2,4}数字保持一致
  370. "c":/^(\d{3,4}-)?\d{7,8}$/,//传真或电话
  371. "t2-4" : /^([\u4E00-\u9FA5\uf900-\ufa2d]|\w){2,4}$/,//中文,字母，下划线和数字
  372. "phone":function(gets,obj,curform,regxp){
  373. /*参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用。*/
  374. var reg1=regxp["m"],
  375. reg2=/(^(\d{3,4}-)?\d{7,8})$/,//电话号码3-4位前，7-8位尾
  376. mobile=curform.find(".mobile");
  377. //如果手机和电话号码都不为空
  378. if(mobile.val()!=""&&gets!=""){
  379. if(reg1.test(mobile.val())){
  380. if(reg2.test(gets)){
  381. return true;
  382. }else{
  383. return "电话号码格式不正确。";
  384. }
  385. }else{
  386. return "手机号码格式不正确。";
  387. }
  388. }
  389. if(reg2.test(gets)){
  390. if(mobile.val()!=""&&mobile.val().replace(/(^\s*)|(\s*$)/g, "")==""){
  391. return "手机号码不能为空或空格";
  392. }else{
  393. return true;
  394. }
  395. }
  396. if(reg1.test(mobile.val())){
  397. if(gets!=""&&gets.replace(/(^\s*)|(\s*$)/g, "")!=""){
  398. return "电话号码不能为空或空格";
  399. }else{
  400. return true;
  401. }
  402. }
  403. return false;
  404. },
  405. "city":function(gets,obj,curform,regxp){
  406. var prov=$("#prov option:selected").val();
  407. if(prov==-1){
  408. return "请选择省份！";
  409. }else{
  410. var c=$("#city").find("option");
  411. if(c.length>1){
  412. var city=$("#city option:selected").val();
  413. if(city==-1){
  414. return "请选择市！";
  415. }else{
  416. var a=$("#area").find("option");
  417. if(a.length>1){
  418. var area=$("#area option:selected").val();
  419. if(area==-1){
  420. return "请选择县！";
  421. }
  422. }
  423. }
  424. }
  425. }
  426. return true;
  427. }
  428. }
  429. });
  430. })
  431. </script>
  432. </html>

上面导入的JS中，比如这样一个：

  1. var location_edus =[{"id":"education01","n":"初中"},{"id":"education02","n":"高中"},{"id":"education03","n":"职高"},{"id":"education04","n":"中专"},{"id":"education05","n":"技校"},{"id":"education06","n":"大专"},{"id":"education07","n":"本科"},{"id":"education08","n":"硕士"},{"id":"education09","n":"博士"}];

修改界面：

  1. <%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
  2. <%@ include file="/public/taglibs.jsp"%>
  3. <%@ include file="/public/checkLogin.jsp"%>
  4. <html>
  5. <head>
  6. <title>${webname}-报名个人信息</title>
  7. <%@ include file="/public/meta.jsp"%>
  8. <%@ include file="/public/artDialog.jsp"%>
  9. <script type="text/javascript" src="/js/common/Data_location.js"></script>
  10. <script type="text/javascript" src="/js/common/Data_folk.js"></script>
  11. <script type="text/javascript" src="/js/common/Data_edu.js"></script>
  12. <script type="text/javascript" src="/js/common/Data_depart.js"></script>
  13. <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
  14. <link rel="stylesheet" href="/js/jquery/plugins/validform/style.css" type="text/css" media="all" />
  15. <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" />
  16. <style type="text/css">
  17. #area_td select {
  18. width: 115px;
  19. }
  20. </style>
  21. <script type="text/javascript">
  22. $(document).ready(function() {
  23. init();
  24. });
  25. function init(){
  26. getAllDps();
  27. getAllFolks();
  28. getAllEducations();
  29. var level='<s:property value="#attr.peBzzStudent.peEnterprise.level"/>';
  30. var currentcode='<s:property value="#attr.peBzzStudent.peEnterprise.code"/>';//用户所在省，市，县
  31. if(level==1){
  32. getAllProvs(currentcode);//查询省
  33. }
  34. else if(level==2){//如果是2级，则查询2级市
  35. var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>';
  36. getAllProvs(provcode);//查询省
  37. getCitiesByProvCode(currentcode);//0表示首次加载时 根据省查询市
  38. }
  39. else if(level==3){//如果是3级，则查询2级市和县区
  40. var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.peEnterprise.code"/>';
  41. var citycode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>';
  42. getAllProvs(provcode);//查询省
  43. getCitiesByProvCode(citycode);
  44. getAreasByCityCode(currentcode);////如果是3级，则查询3级县区
  45. }else{
  46. getAllProvs();//查询省
  47. }
  48. }
  49. function getAllEducations(){
  50. for(var index in location_edus){
  51. var edu = location_edus[index];
  52. var s='';
  53. var eid='<s:property value="#attr.peBzzStudent.enumConstByFlagEducation.id"/>';
  54. if(eid==edu.id){
  55. s='selected="selected"';
  56. }
  57. $("#education").append("<option "+s+" value="+edu.id+" >"+edu.n+"</option>");
  58. }
  59. }
  60. function getAllFolks(){
  61. for(var index in location_folks){
  62. var folk = location_folks[index];
  63. var s='';
  64. var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagFolk.id"/>';
  65. if(fid==folk.id){
  66. s='selected="selected"';
  67. }
  68. $("#folk").append("<option "+s+" value="+folk.id+" >"+folk.n+"</option>");
  69. }
  70. }
  71. function getAllDps(){
  72. for(var index in location_departs){
  73. var depart = location_departs[index];
  74. var s='';
  75. var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagDepartProperty.id"/>';
  76. if(fid==depart.id){
  77. s='selected="selected"';
  78. }
  79. $("#dp").append("<option "+s+" value="+depart.id+" >"+depart.n+"</option>");
  80. }
  81. }
  82. function getAllProvs(currentcode){
  83. for(var index in location_provs){
  84. var prov = location_provs[index];
  85. var s='';
  86. if(currentcode==prov.c){
  87. s='selected="selected"';
  88. }
  89. $("#prov").append("<option "+s+" value="+prov.c+" >"+prov.n+"</option>");
  90. }
  91. }
  92. function getCitiesByProvCode(currentcode){
  93. var provcode=$("#prov option:selected").val();
  94. $("#area").empty();
  95. $("#area").append("<option value=\"-1\" >请选择</option>");
  96. $("#city").empty();
  97. $("#city").append("<option value=\"-1\" >请选择</option>");
  98. for(var index in location_cities){
  99. var city = location_cities[index];
  100. if(city.p==provcode){
  101. var s='';
  102. if(currentcode==city.c){
  103. s='selected="selected"';
  104. }
  105. $("#city").append("<option "+s+" value="+city.c+" >"+city.n+"</option>");
  106. }
  107. }
  108. }
  109. function getAreasByCityCode(currentcode){
  110. var citycode=$("#city option:selected").val();
  111. $("#area").empty();
  112. $("#area").append("<option value=\"-1\" >请选择</option>");
  113. for(var index in location_areas){
  114. var area = location_areas[index];
  115. if(area.p==citycode){
  116. var s='';
  117. if(currentcode==area.c){
  118. s='selected="selected"';
  119. }
  120. $("#area").append("<option "+s+" value="+area.c+" >"+area.n+"</option>");
  121. }
  122. }
  123. }
  124. </script>
  125. </head>
  126. <body>
  127. <div class="centent_zxzc">
  128. <div style="margin-left: 20px;">
  129. <form action="/entity/workspaceStudent/bzzstudent_examModifyInfo.action" method="post" name="registerfrm" class="registerfrm">
  130. <table class="datalist3" cellpadding="0" style="float: left;" cellspacing="0" width="770">
  131. <caption style="font-size: 20px; color: green; margin: 10px 0px 10px 0px;">
  132. *     学 员 基 本 信 息     *
  133. </span>
  134. </caption>
  135. <tr>
  136. <td width="80" rowspan="6" align="center" bgcolor="#f3f3f3">
  137. 个人信息
  138. </td>
  139. <td width="60">
  140. <span class="redfont">*</span>用户名
  141. </td>
  142. <td class="lefttd">
  143. <input type="text" name="peBzzStudent.ssoUser.loginId" value="${peBzzStudent.ssoUser.userName}" id="loginId" readonly="readonly"
  144. maxlength="30" size="30" />
  145. <span class="Validform_checktip">用户名不可更改！</span>
  146. </td>
  147. </tr>
  148. <tr>
  149. <td>
  150. <span class="redfont">*</span>姓  名
  151. </td>
  152. <td class="lefttd">
  153. <input type="text" name="peBzzStudent.trueName" value="${peBzzStudent.trueName}" id="name" class="inputxt" datatype="t2-15"
  154. errormsg="姓名2-15个汉字、字母、下划线和数字！" maxlength="25" size="30" />
  155. <span class="Validform_checktip">请填写您的真实姓名，用于证书发放</span>
  156. </td>
  157. </tr>
  158. <tr>
  159. <td>
  160. <span class="redfont">*</span>性  别
  161. </td>
  162. <td class="lefttd">
  163. <%--sex的value指定为id，懒加载--%>
  164. <select name="peBzzStudent.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;">
  165. <option value="">
  166. --- 请选择性别---
  167. </option>
  168. <option value="402880911da481e0011da4963df60004" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da4963df60004'}"> selected="selected" </c:if>>
  169. 男
  170. </option>
  171. <option value="402880911da481e0011da49697130005" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da49697130005'}"> selected="selected" </c:if>>
  172. 女
  173. </option>
  174. </select>
  175. <span class="Validform_checktip"></span>
  176. </td>
  177. </tr>
  178. <tr>
  179. <td>
  180. <span class="redfont"></span>民  族
  181. </td>
  182. <td class="lefttd">
  183. <SELECT id="folk" ignore="ignore" datatype="*" name="peBzzStudent.enumConstByFlagFolk.id" style="width: 175px;">
  184. <OPTION value="">
  185. ---请选择民族---
  186. </OPTION>
  187. </SELECT>
  188. <span class="Validform_checktip"></span>
  189. </td>
  190. </tr>
  191. <tr>
  192. <td>
  193. <span class="redfont">*</span>出生日期
  194. </td>
  195. <td class="lefttd">
  196. <input type="text" name="peBzzStudent.birthdayDate" datatype="*"
  197. value="<fmt:formatDate pattern="yyyy-MM-dd" value="${peBzzStudent.birthdayDate}"/>" id="birthday" readonly="readonly"
  198. onClick="WdatePicker({maxDate:'%y-%M-%d'})" size="30" />
  199. <span class="Validform_checktip">请选择您的真实出生日期，用于证书发放。</span>
  200. </td>
  201. </tr>
  202. <tr>
  203. <td>
  204. <span class="redfont">*</span>学  历
  205. </td>
  206. <td class="lefttd">
  207. <select id="education" name="peBzzStudent.enumConstByFlagEducation.id" datatype="*" style="width: 175px;">
  208. <option value="">
  209. ---请选择学历---
  210. </option>
  211. </select>
  212. <span class="Validform_checktip"></span>
  213. </td>
  214. </tr>
  215. <tr>
  216. <td width="50" rowspan="9" align="center" bgcolor="#f3f3f3">
  217. 通讯信息
  218. </td>
  219. <td>
  220. <span class="redfont">*</span>工作单位
  221. </td>
  222. <td class="lefttd">
  223. <input type="text" name="peBzzStudent.department" value="${peBzzStudent.department}" id="depart" class="inputxt" datatype="t4-25"
  224. errormsg="工作单位4-25个汉字、字母、下划线和数字！" maxlength="50" size="30" />
  225. <span class="Validform_checktip">工作单位4-25个汉字、字母、下划线和数字</span>
  226. </td>
  227. </tr>
  228. <tr>
  229. <td>
  230. <span class="redfont"></span>职称职务
  231. </td>
  232. <td class="lefttd">
  233. <input type="text" ignore="ignore" name="peBzzStudent.position" value="${peBzzStudent.position}" id="position" class="inputxt"
  234. datatype="t2-15" errormsg="职称2-15个汉字、字母、下划线和数字！！" maxlength="30" size="30" />
  235. <span class="Validform_checktip">职称2-15个汉字、字母、下划线和数字！</span>
  236. </td>
  237. </tr>
  238. <tr>
  239. <td>
  240. <span class="redfont">*</span>手  机
  241. </td>
  242. <td class="lefttd">
  243. <input type="text" name="peBzzStudent.mobilePhone" value="${peBzzStudent.mobilePhone}" onkeypress="KeyPress(this.value);" id="mobilePhone"
  244. class="inputxt mobile" datatype="m" errormsg="手机号为11位有效数字！" maxlength="30" size="30" />
  245. <span class="Validform_checktip">请输入11位有效手机号，方便学习联系。</span>
  246. </td>
  247. </tr>
  248. <tr>
  249. <td>
  250. <span class="redfont">*</span>电  话
  251. </td>
  252. <td class="lefttd">
  253. <input type="text" name="peBzzStudent.phone" value="${peBzzStudent.phone}" id="phone" class="inputxt" datatype="c" errormsg="电话号码格式不正确！"
  254. maxlength="30" size="30" />
  255. <span class="Validform_checktip">例如：0712-7827881,58731118</span>
  256. </td>
  257. </tr>
  258. <tr>
  259. <td>
  260. 传  真
  261. </td>
  262. <td class="lefttd">
  263. <input type="text" ignore="ignore" name="peBzzStudent.fax" value="${peBzzStudent.fax}" id="fax" class="inputxt" datatype="c"
  264. errormsg="传真格式为0712-7827881或58731118！" maxlength="30" size="30" />
  265. <span class="Validform_checktip">与电话号码格式一致</span>
  266. </td>
  267. </tr>
  268. <tr>
  269. <td>
  270. <span class="redfont">*</span>Email
  271. </td>
  272. <td class="lefttd">
  273. <input type="text" name="peBzzStudent.email" value="${peBzzStudent.email}" id="email" class="inputxt" datatype="e" errormsg="邮箱格式不正确！"
  274. maxlength="30" size="30" />
  275. <span class="Validform_checktip">请输入真实邮件地址，用于发送您的报名信息。</span>
  276. </td>
  277. </tr>
  278. <tr>
  279. <td>
  280. <span class="redfont">*</span>邮政编码
  281. </td>
  282. <td class="lefttd">
  283. <input type="text" ignore="ignore" name="peBzzStudent.zipcode" value="${peBzzStudent.zipcode}" id="zipcode" onkeypress="KeyPress(this.value);"
  284. class="inputxt" datatype="p" errormsg="邮政编码6个数字！" maxlength="30" size="30" />
  285. <span class="Validform_checktip">请输入6位邮政编码</span>
  286. </td>
  287. </tr>
  288. <tr>
  289. <td>
  290. <span class="redfont">*</span>所在地区
  291. </td>
  292. <td class="lefttd" id="area_td">
  293. <select id="prov" name="provcode" onchange="getCitiesByProvCode();" datatype="city">
  294. <option value="-1">
  295. 请选择
  296. </option>
  297. </select>
  298. <select id="city" name="citycode" onchange="getAreasByCityCode();" style="margin-left: 20px;" datatype="city">
  299. <option value="-1">
  300. 请选择
  301. </option>
  302. </select>
  303. <select id="area" name="peBzzStudent.peEnterprise.code" style="margin-left: 20px;" datatype="city">
  304. <option value="-1">
  305. 请选择
  306. </option>
  307. </select>
  308. <span class="Validform_checktip"></span>
  309. </td>
  310. </tr>
  311. <tr>
  312. <td>
  313. <span class="redfont">*</span>详细地址
  314. </td>
  315. <td class="lefttd">
  316. <input type="text" name="peBzzStudent.address" value="${peBzzStudent.address}" id="address" maxlength="25" size="30" class="inputxt"
  317. datatype="t4-25" errormsg="地址4-25个汉字、字母、下划线和数字！" maxlength="30" />
  318. <span class="Validform_checktip">上面选择省市，此处仅写除省市外的详细地址</span>
  319. </td>
  320. </tr>
  321. <tr>
  322. <td bgcolor="#f3f3f3">
  323. 单位属性
  324. </td>
  325. <td>
  326. <span class="redfont">*</span>单位属性
  327. </td>
  328. <td class="lefttd">
  329. <select id="dp" name="peBzzStudent.enumConstByFlagDepartProperty.id" datatype="*" nullmsg="请选择单位属性" style="width: 175px;">
  330. <option value="">
  331. --- 请选择单位属性---
  332. </option>
  333. </select>
  334. <span id="dp" class="Validform_checktip">请选择您的单位属性</span>
  335. </td>
  336. </tr>
  337. <tr>
  338. <td colspan="3" style="padding-right: 300px;">
  339. <div>
  340. <input style="display: none;" type="submit" value="提交" id="sub" />
  341. <input style="display: none;" type="reset" value="重填" id="res" />
  342. <input type="hidden" name="peBzzStudent.id" value="${peBzzStudent.id}" />
  343. <div class="tijiao">
  344. <a href="javascript:void(0);" onclick="$$('res').click();">重填</a>
  345. </div>
  346. <div class="tijiao">
  347. <a href="javascript:void(0);" onclick="$$('sub').click();">提交</a>
  348. </div>
  349. </div>
  350. </td>
  351. </tr>
  352. </table>
  353. </form>
  354. <div>
  355. </body>
  356. <script type="text/javascript" src="/js/jquery/plugins/validform/Validform.js"></script>
  357. <script type="text/javascript">
  358. $(function() {
  359. $(".registerfrm").Validform({
  360. tiptype:function(msg,o,cssctl){
  361. if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
  362. var objtip=o.obj.siblings(".Validform_checktip");//指定错误提示控件
  363. cssctl(objtip,o.type);
  364. objtip.text(msg);
  365. }
  366. },
  367. showAllError:true,//一次性提示所有错误
  368. datatype:{//传入自定义datatype类型
  369. "u2-4" : /^[0-9a-zA-Z]{1}\w{2,4}$/,//数字和字母开头，后面可以有下划线u2-4和后面的{2,4}数字保持一致
  370. "c":/^(\d{3,4}-)?\d{7,8}$/,//传真或电话
  371. "t2-4" : /^([\u4E00-\u9FA5\uf900-\ufa2d]|\w){2,4}$/,//中文,字母，下划线和数字
  372. "city":function(gets,obj,curform,regxp){
  373. var prov=$("#prov option:selected").val();
  374. if(prov==-1){
  375. return "请选择省份！";
  376. }else{
  377. var c=$("#city").find("option");
  378. if(c.length>1){
  379. var city=$("#city option:selected").val();
  380. if(city==-1){
  381. return "请选择市！";
  382. }else{
  383. var a=$("#area").find("option");
  384. if(a.length>1){
  385. var area=$("#area option:selected").val();
  386. if(area==-1){
  387. return "请选择县！";
  388. }
  389. }
  390. }
  391. }
  392. }
  393. return true;
  394. }
  395. }
  396. });
  397. })
  398. </script>
  399. </html>

转载自 http://blog.csdn.net/yaerfeng/article/details/8293587

validform表单验证插件最终版的更多相关文章

  1. 微信小程序——表单验证插件WxValidate的二次封装（终极版）

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  2. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  3. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  4. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  5. 微信小程序——表单验证插件WxValidate的二次封装（二）

    在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...

  6. 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装（一）

    在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  9. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

随机推荐

  1. C# 开发技巧]如何防止程序多次运行 线程 进程

    程序员必有一些好习惯,我的就是看到好文章就收下 文章来源   http://www.cnblogs.com/zhili/p/OnlyInstance.html 转载请注明出处 最近发现很多人在论坛中问 ...

  2. Struts2--Action属性接收参数

    1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...

  3. Contaminated Milk

    Contaminated Milk 题目描述 Farmer John, known far and wide for the quality of the milk produced on his f ...

  4. C语言数据类型的表示范围

    1.C和C++语言中基本的数据类型有:字符型(char),整形(short, int, long), 浮点型(float, double)    类型 字节数 类型 字节数 char 1 short ...

  5. 想要学习Linux技术，先好好的读一本Linux书籍吧

    忘记你在使用windows时的使用习惯和使用思维.学习Linux,一定要适应Linux的命令行界面,因为命令行才是Linux的真正魅力所在,而X-window或着说桌面环境也只是运行在命令行模式下的一 ...

  6. Unity3d之协程自实现测试

    using UnityEngine; using System.Collections; public class TestStartCoroutine : MonoBehaviour { IEnum ...

  7. C# MODBUS协议 上位机(转)

    源:C# MODBUS协议 上位机 C#写了一款上位机监控软件,基于MODBUS_RTU协议. 软件的基本结构: 采用定时器(Timer控件)为时间片. 串口采用serialPort1_DataRec ...

  8. RestTemplate 发送Post 多个参数请求

    MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>(); requestEntity ...

  9. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  10. javascript之日期对象

    学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在j ...