validform表單驗證插件最終版

時間  2019-12-04
標籤 validform 表單 驗證 插件 最終 欄目 HTML 简体版
原文   原文鏈接
 

validform表單驗證插件最終版

2012-12-14 09:57 19846人閱讀 評論(6) 收藏 舉報
 分類：

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。javascript

作個筆記，之後直接用吧。css

報名界面：html

[html]  view plain  copy
 
 print?
  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指示提示的狀態，值爲一、二、三、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中，好比這樣一個：java

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


 

修改界面：jquery

[html]  view plain  copy
 
 print?
  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>  


 
頂
4
 
踩
0
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程