validform表单验证插件最终版

其他 2019-01-21 09:01:00 阅读次数: 0

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

报名界面：

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


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

[javascript]  view plain copy
  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":"博士"}];  


 

修改界面：

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


http://blog.csdn.net/yaerfeng/article/details/8293587

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

报名界面：

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


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

[javascript]  view plain copy
  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":"博士"}];  


 

修改界面：

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


http://blog.csdn.net/yaerfeng/article/details/8293587

猜你喜欢

转载自blog.csdn.net/macrohui29/article/details/41519613
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022