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

报名界面：

  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. Chapter 1 First Sight——7

    Eventually we made it to Charlie's. 最终我们到了查理斯的家. He still lived in the small,two-bedroom house that ...

  2. STM32开发指南-跑马灯实验

    简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...

  3. 可用类型的几何对象esriGeometryType Constants

    The available kinds of geometry objects. Constant Value Description esriGeometryNull 0 A geometry of ...

  4. oracle监听无法启动

    昨天再监听里新加了个地址,重启电脑后监听无法启动,删除新加地址就好了 # listener.ora Network Configuration File: d:\oracle\product\10.2 ...

  5. 计算机学院大学生程序设计竞赛（2015’12） 1002 Polygon

    #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #inclu ...

  6. 【supervisord】部署单进程服务的利器

    最近听了一场分享,里边同事介绍了一些python开发环境常用到的几种工具,其中之一就supervisord,分享后自己做了些功课,概括一下supervisord是一个什么东西呢 1. 它是一个独立的常 ...

  7. H2最完整的资料下载地址：

    淡泊以明志,宁静以致远 博客园 首页 新随笔 联系 管理 订阅 随笔- 678  文章- 0  评论- 137  H2 database的使用   H2最完整的资料下载地址: http://downl ...

  8. EM算法--第一篇

    在统计计算中,最大期望(EM)算法是在概率(probabilistic)模型中寻找参数最大似然估计或者最大后验估计的算法,其中概率模型依赖于无法观测的隐藏变量(LatentVariable).最大期望 ...

  9. iOS之UILabel自适应大小

    //初始化一个label self.label=[[UILabel alloc] init]; //设置自动行数与字符换行 [self.label setNumberOfLines:0]; //给la ...

  10. Lua学习系列（五）

    calling C functions from Lua 5.2 这篇文章也不错: http://blog.csdn.net/x356982611/article/details/26688287 h ...