validform表单验证插件最终版

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

报名界面：

[html] view plaincopyprint?
  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 plaincopyprint?
  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 plaincopyprint?
  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

posted on 2015-07-09 14:28  扶强  阅读(397)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 扶强
Powered by .NET 9.0 on Kubernetes