<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/public/taglibs.jsp"%>
<%@ include file="/public/artDialog.jsp"%>
<html>
 <head>
  <title>${webname}-报名界面</title>
  <%@ include file="/public/meta.jsp"%>
  <script type="text/javascript" src="/js/common/Data_location.js"></script>
  <script type="text/javascript" src="/js/common/Data_folk.js"></script>
  <script type="text/javascript" src="/js/common/Data_edu.js"></script>
  <script type="text/javascript" src="/js/common/Data_depart.js"></script>
  <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
  <link rel="stylesheet" href="/js/jquery/plugins/validform/style.css" type="text/css" media="all" />
  <link rel="stylesheet" href="/css/index.css" type="text/css" media="all" />
  <style type="text/css">
#area_td select {
 width: 115px;
}
</style>
  <script type="text/javascript">
  //DOM加载完成后即初始化动态数据，代替onload避免图片加载时的等待
  $(document).ready(function() {
   init();
  });  
  function init(){
   getAllDps();
   getAllFolks();
   getAllEducations();
   getAllProvs();//查询省
  }
  function getAllEducations(){
   for(var index in location_edus){
    var edu = location_edus[index];
    $("#education").append("<option value="+edu.id+" >"+edu.n+"</option>");
   }
  }
  
  function getAllFolks(){
   for(var index in location_folks){
    var folk = location_folks[index];
    $("#folk").append("<option value="+folk.id+" >"+folk.n+"</option>");
   }
  }
  
  function getAllDps(){
   for(var index in location_departs){
    var depart = location_departs[index];
    $("#dp").append("<option value="+depart.id+" >"+depart.n+"</option>");
   }
  }
  
  function getAllProvs(currentcode){
   for(var index in location_provs){
    var prov = location_provs[index];
    $("#prov").append("<option value="+prov.c+" >"+prov.n+"</option>");
   }
  }
  function getCitiesByProvCode(currentcode){
            var provcode=$("#prov option:selected").val();
            $("#area").empty(); 
            $("#area").append("<option value=\"-1\" >请选择</option>");
            $("#city").empty(); 
            $("#city").append("<option value=\"-1\" >请选择</option>");
            for(var index in location_cities){
    var city = location_cities[index];
    if(city.p==provcode){
     var s='';
                   if(currentcode==city.c){
                   s='selected="selected"';
                     }
     $("#city").append("<option "+s+" value="+city.c+" >"+city.n+"</option>");
    }
   }
        }
       
        function getAreasByCityCode(currentcode){
            var citycode=$("#city option:selected").val();
            $("#area").empty(); 
            $("#area").append("<option value=\"-1\" >请选择</option>");
            for(var index in location_areas){
    var area = location_areas[index];
    if(area.p==citycode){
     var s='';
                  if(currentcode==area.c){
                   s='selected="selected"';
                    }
     $("#area").append("<option "+s+" value="+area.c+" >"+area.n+"</option>");
    }
   }
        }
 </script>
 </head>

 <body>
  <div class="container">
   <div id="topmenu">
    <IFRAME NAME="topm" width=100% height="217px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/head.html" scrolling=no
     allowTransparency="true"></IFRAME>
   </div>
   <div class="centent_zxzc">
    <div class="left_zxzc">
     <p>
      右侧表格中带*是必填项；已注册用户请勿重复注册，您的
      <span class="red">默认密码为：111111</span>，请您登陆后修改密码，忘记密码请联系我们。请您务必准确填写各项信息，信息的准确度将直接影响您的报名资质及后期发票、学习资料和结业证书送达工作。
     </p>
    </div>
    <div class="right_zxzc">
     <div class="zxzc_title">
      <img src="../p_w_picpaths/zxzc_03.gif">
     </div>
     <form action="/register/peBzzRec_register.action" method="post" class="registerfrm">
      <table class="datalist3" cellpadding="0" cellspacing="0" width="680">
       <tr>
        <td width="80" rowspan="7" align="center" bgcolor="#f3f3f3">
         个人信息
        </td>
        <td width="60">
         <span class="redfont">*</span>用户名
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.ssoUser.userName" ajaxurl="/register/peBzzRec_checkUsername.action" id="loginId" class="inputxt"
          datatype="u3-19" errormsg="用户名4-20个汉字、字母、下划线和数字！" maxlength="30" size="30" />
         <span class="Validform_checktip">用于登录名。长度为4-20，只能输入字母、数字和下划线</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>密&nbsp;&nbsp;码
        </td>
        <td class="lefttd">
         <input type="text" value="111111" readonly="readonly" size="30" maxlength="25" />
         <span class="Validform_checktip">默认密码：6个1。请您牢记密码！登录后可修改。</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>姓&nbsp;&nbsp;名
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.name" id="name" class="inputxt" datatype="t2-15" errormsg="姓名2-15个汉字、字母、下划线和数字！" maxlength="30"
          size="30" />
         <span class="Validform_checktip">请填写您的真实姓名，用于证书发放</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>性&nbsp;&nbsp;别
        </td>
        <td class="lefttd">
         <select name="peBzzRecruit.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;">
          <option value="">
           --- 请选择性别---
          </option>
          <option value="402880911da481e0011da4963df60004">
           男
          </option>
          <option value="402880911da481e0011da49697130005">
           女
          </option>
         </select>
         <span class="Validform_checktip"></span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont"></span>民&nbsp;&nbsp;族
        </td>
        <td class="lefttd">
         <SELECT id="folk" name="peBzzRecruit.enumConstByFlagFolk.id" style="width: 175px;">
          <OPTION value="-1">
           --- 请选择民族---
          </OPTION>
         </SELECT>
         <span class="Validform_checktip"></span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>出生日期
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.birthdayDate" datatype="*" id="birthday" readonly="readonly"
          onClick="WdatePicker({maxDate:'%y-%M-%d'})" size="30" />
         <span class="Validform_checktip">请选择您的真实出生日期，用于证书发放。</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>学&nbsp;&nbsp;历
        </td>
        <td class="lefttd">
         <select id="education" name="peBzzRecruit.enumConstByFlagEducation.id" datatype="*" nullmsg="请选择学历" style="width: 175px;">
          <option value="">
           --- 请选择学历---
          </option>
         </select>
         <span class="Validform_checktip"></span>
        </td>
       </tr>
       <tr>
        <td width="50" rowspan="9" align="center" bgcolor="#f3f3f3">
         通讯信息
        </td>
        <td>
         <span class="redfont">*</span>工作单位
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.department" id="depart" class="inputxt" datatype="t4-25" errormsg="工作单位4-25个汉字、字母、下划线和数字！"
          maxlength="50" size="30" />
         <span class="Validform_checktip">工作单位4-25个汉字、字母、下划线和数字</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont"></span>职称职务
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.position" id="position" class="inputxt" ignore="ignore" datatype="t2-15"
          errormsg="职称2-15个汉字、字母、下划线和数字！" maxlength="30" size="30" />
         <span class="Validform_checktip">职称2-15个字符 </span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>手&nbsp;&nbsp;机
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.mobilePhone" id="mobilePhone" class="inputxt mobile" datatype="m" errormsg="手机号为11位有效号码！"
          maxlength="30" size="30" />
         <span class="Validform_checktip">请输入11位有效手机号，方便学习联系。</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>电&nbsp;&nbsp;话
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.phone" id="phone" class="inputxt" datatype="c" errormsg="电话号码格式不正确！" maxlength="30" size="30" />
         <span class="Validform_checktip">例如：0712-7827881,58731118</span>
        </td>
       </tr>
       <tr>
        <td>
         传&nbsp;&nbsp;真
        </td>
        <td class="lefttd">
         <input type="text" ignore="ignore" name="peBzzRecruit.fax" id="fax" class="inputxt" datatype="c" errormsg="传真格式为0712-7827881或58731118！"
          maxlength="30" size="30" />
         <span class="Validform_checktip">和电话号码格式一致</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>Email
        </td>
        <td class="lefttd">
         <input type="text" name="peBzzRecruit.email" id="email" class="inputxt" datatype="e" errormsg="邮箱格式不正确！" maxlength="30" size="30" />
         <span class="Validform_checktip">请输入真实邮件地址，用于发送您的报名信息。</span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>邮政编码
        </td>
        <td class="lefttd">
         <input type="text" ignore="ignore" name="peBzzRecruit.zipcode" id="zipcode" οnkeypress="KeyPress(this.value);" class="inputxt" datatype="p"
          errormsg="邮政编码6个数字！" maxlength="30" size="30" />
         <span class="Validform_checktip">请输入6位邮政编码 </span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>所在地区
        </td>
        <td class="lefttd" id="area_td" colspan="3">
         <select id="prov" name="provcode" οnchange="getCitiesByProvCode();" datatype="city">
          <option value="-1">
           请选择
          </option>
         </select>
         <select id="city" name="citycode" οnchange="getAreasByCityCode();" style="margin-left: 20px;" datatype="city">
          <option value="-1">
           请选择
          </option>
         </select>
         <select id="area" name="peBzzRecruit.peEnterprise.code" style="margin-left: 20px;" datatype="city">
          <option value="-1">
           请选择
          </option>
         </select>
         <span class="Validform_checktip"></span>
        </td>
       </tr>
       <tr>
        <td>
         <span class="redfont">*</span>详细地址
        </td>
        <td class="lefttd" colspan="3">
         <input type="text" name="peBzzRecruit.address" id="address" maxlength="25" size="30" class="inputxt" datatype="t4-25"
          errormsg="地址4-25个汉字、字母、下划线和数字！" maxlength="30" />
         <span class="Validform_checktip">上面选择省市，此处仅写除省市外的详细地址</span>
        </td>
       </tr>
       <tr>
        <td bgcolor="#f3f3f3">
         单位属性
        </td>
        <td>
         <span class="redfont">*</span>单位属性
        </td>
        <td class="lefttd" colspan="2">
         <select id="dp" name="peBzzRecruit.enumConstByFlagDepartProperty.id" datatype="*" nullmsg="请选择单位属性" style="width: 175px;">
          <option value="">
           --- 请选择单位属性---
          </option>
         </select>
         <span class="Validform_checktip">请选择您的单位属性</span>
        </td>
       </tr>
      </table>
      <div style="padding-right: 200px;">
       <input style="display: none;" type="submit" value="提交" id="sub" />
       <input style="display: none;" type="reset" value="重填" id="res" />
       <div class="tijiao">
        <a href="javascript:void(0);" οnclick="$('#res').click();">重填</a>
       </div>
       <div class="tijiao" id="subdiv">
        <a id="subbtn" href="javascript:void(0);" οnclick="$('#sub').click();">提交</a>
       </div>
       <span id="msgdemo" style="margin-left: 30px;"></span>
       <br />
       <br />
       <br />
      </div>
     </form>
    </div>
   </div>
   <div id="bottommenu">
    <IFRAME NAME="bottomm" width=100% height="100px" frameborder=0 marginwidth=0 marginheight=0 SRC="/public/bottom.html" scrolling=no
     allowTransparency="true" align="center"></IFRAME>
   </div>
  </div>
 </body>
 <script type="text/javascript" src="/js/jquery/plugins/validform/Validform.js"></script>
 <script type="text/javascript">
$(function() {
 var showmsg=function(msg){//假定你的信息提示方法为showmsg， 在方法里可以接收参数msg，当然也可以接收到o及cssctl;
   if(msg.stat=="y"){
    window.location.href=msg.url;
   }else if(msg.stat&&msg.stat!="undefined"){
    $("#subbtn").disabled="";//启用提交按钮，如果出现错误可以再次提交
    artAlert("在线报名失败，原因："+msg.stat,"e");
   }
 }
 $(".registerfrm").Validform({
  tiptype:function(msg,o,cssctl){
   if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
    //var objtip=$("#Validform_checktip");
    var objtip=o.obj.siblings(".Validform_checktip");//指定错误提示控件
    cssctl(objtip,o.type);
    objtip.text(msg);
   }else{//type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败
    if(o.type=="1"){
     $("#subbtn").disabled="disabled";//提交时禁用提交按钮
    }
   }
  },
  ajaxPost:true,
  callback:function(data){
   showmsg(data);
  },
  showAllError:true,//一次性提示所有错误，正式和测试可用
  datatype:{//传入自定义datatype类型
   "u2-4" : /^[0-9a-zA-Z]{1}\w{2,4}$/,//数字和字母开头，后面可以有下划线u2-4和后面的{2,4}数字保持一致
   "c":/^(\d{3,4}-)?\d{7,8}$/,//传真或电话
   "t2-4" : /^([\u4E00-\u9FA5\uf900-\ufa2d]|\w){2,4}$/,//中文,字母，下划线和数字
   "phone":function(gets,obj,curform,regxp){
    /*参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用。*/
    var reg1=regxp["m"],
     reg2=/(^(\d{3,4}-)?\d{7,8})$/,//电话号码3-4位前，7-8位尾
     mobile=curform.find(".mobile");
    //如果手机和电话号码都不为空
    if(mobile.val()!=""&&gets!=""){
     if(reg1.test(mobile.val())){
      if(reg2.test(gets)){
       return true;
      }else{
       return "电话号码格式不正确。";
      }
     }else{
      return "手机号码格式不正确。";
     }
    }
    if(reg2.test(gets)){
     if(mobile.val()!=""&&mobile.val().replace(/(^\s*)|(\s*$)/g, "")==""){
      return "手机号码不能为空或空格";
     }else{
      return true;
     }
    }
    if(reg1.test(mobile.val())){
     if(gets!=""&&gets.replace(/(^\s*)|(\s*$)/g, "")!=""){
      return "电话号码不能为空或空格";
     }else{
      return true;
     }
    }
    return false;
   },
   "city":function(gets,obj,curform,regxp){
    var prov=$("#prov option:selected").val();
          if(prov==-1){
           return "请选择省份！";
          }else{
           var c=$("#city").find("option");
           if(c.length>1){
            var city=$("#city option:selected").val();
            if(city==-1){
             return "请选择市！";
            }else{
             var a=$("#area").find("option");
             if(a.length>1){
              var area=$("#area option:selected").val();
              if(area==-1){
               return "请选择县！";
              }
             }
            }
           }
          }
          return true;
   }
  }
 });
})
</script>
</html>