当前位置: 代码迷 >> Web前端 >> validform表单应验插件最终版
  详细解决方案

validform表单应验插件最终版

热度:317   发布时间:2012-12-26 14:39:29.0
validform表单验证插件最终版

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

报名界面:

<%@ 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="../images/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>密  码
								</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>姓  名
								</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>性  别
								</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>民  族
								</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>学  历
								</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>手  机
								</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>电  话
								</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>
									传  真
								</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" onkeypress="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" onchange="getCitiesByProvCode();" datatype="city">
										<option value="-1">
											请选择
										</option>
									</select>
									<select id="city" name="citycode" onchange="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);" onclick="$('#res').click();">重填</a>
							</div>
							<div class="tijiao" id="subdiv">
								<a id="subbtn" href="javascript:void(0);" onclick="$('#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>


上面导入的JS中,比如这样一个:

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":"博士"}];


 

修改界面:

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/public/taglibs.jsp"%>
<%@ include file="/public/checkLogin.jsp"%>
<html>
	<head>
		<title>${webname}-报名个人信息</title>
		<%@ include file="/public/meta.jsp"%>
		<%@ include file="/public/artDialog.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">
        $(document).ready(function() {
			init();
		});
		function init(){
			getAllDps();
			getAllFolks();
			getAllEducations();
			var level='<s:property value="#attr.peBzzStudent.peEnterprise.level"/>';
			var currentcode='<s:property value="#attr.peBzzStudent.peEnterprise.code"/>';//用户所在省,市,县
			if(level==1){
				getAllProvs(currentcode);//查询省
			}
			else if(level==2){//如果是2级,则查询2级市
				var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>';
				getAllProvs(provcode);//查询省
				getCitiesByProvCode(currentcode);//0表示首次加载时 根据省查询市
			}
			else if(level==3){//如果是3级,则查询2级市和县区
				var provcode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.peEnterprise.code"/>';
				var citycode='<s:property value="#attr.peBzzStudent.peEnterprise.peEnterprise.code"/>';
				getAllProvs(provcode);//查询省
				getCitiesByProvCode(citycode);
				getAreasByCityCode(currentcode);////如果是3级,则查询3级县区
			}else{
				getAllProvs();//查询省
			}
		}
		function getAllEducations(){
			for(var index in location_edus){
				var edu = location_edus[index];
				var s='';
             	var eid='<s:property value="#attr.peBzzStudent.enumConstByFlagEducation.id"/>';
             	if(eid==edu.id){
             		s='selected="selected"';
               	}
				$("#education").append("<option "+s+" value="+edu.id+" >"+edu.n+"</option>");
			}
		}
		
		function getAllFolks(){
			for(var index in location_folks){
				var folk = location_folks[index];
				var s='';
               	var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagFolk.id"/>';
               	if(fid==folk.id){
               		s='selected="selected"';
                 } 
				$("#folk").append("<option "+s+" value="+folk.id+" >"+folk.n+"</option>");
			}
		}
		
		function getAllDps(){
			for(var index in location_departs){
				var depart = location_departs[index];
				var s='';
                var fid='<s:property value="#attr.peBzzStudent.enumConstByFlagDepartProperty.id"/>';
                if(fid==depart.id){
                    s='selected="selected"';
                 } 
                 $("#dp").append("<option "+s+" value="+depart.id+" >"+depart.n+"</option>");
			}
		}
		
		function getAllProvs(currentcode){
			for(var index in location_provs){
				var prov = location_provs[index];
				var s='';
             	if(currentcode==prov.c){
             		s='selected="selected"';
               	}
				$("#prov").append("<option "+s+" 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="centent_zxzc">
			<div style="margin-left: 20px;">
				<form action="/entity/workspaceStudent/bzzstudent_examModifyInfo.action" method="post" name="registerfrm" class="registerfrm">
					<table class="datalist3" cellpadding="0" style="float: left;" cellspacing="0" width="770">
						<caption style="font-size: 20px; color: green; margin: 10px 0px 10px 0px;">
							*     学 员 基 本 信 息     *
							</span>
						</caption>
						<tr>
							<td width="80" rowspan="6" align="center" bgcolor="#f3f3f3">
								个人信息
							</td>
							<td width="60">
								<span class="redfont">*</span>用户名
							</td>
							<td class="lefttd">
								<input type="text" name="peBzzStudent.ssoUser.loginId" value="${peBzzStudent.ssoUser.userName}" id="loginId" readonly="readonly"
									maxlength="30" size="30" />
								<span class="Validform_checktip">用户名不可更改!</span>
							</td>
						</tr>
						<tr>
							<td>
								<span class="redfont">*</span>姓  名
							</td>
							<td class="lefttd">
								<input type="text" name="peBzzStudent.trueName" value="${peBzzStudent.trueName}" id="name" class="inputxt" datatype="t2-15"
									errormsg="姓名2-15个汉字、字母、下划线和数字!" maxlength="25" size="30" />
								<span class="Validform_checktip">请填写您的真实姓名,用于证书发放</span>
							</td>
						</tr>
						<tr>
							<td>
								<span class="redfont">*</span>性  别
							</td>
							<td class="lefttd">
								<%--sex的value指定为id,懒加载--%>
								<select name="peBzzStudent.enumConstByGender.id" datatype="*" nullmsg="请选择性别" style="width: 175px;">
										<option value="">
											--- 请选择性别---
										</option>
										<option value="402880911da481e0011da4963df60004" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da4963df60004'}"> selected="selected" </c:if>>
											男
										</option>
										<option value="402880911da481e0011da49697130005" <c:if test="${peBzzStudent.enumConstByGender !=null&&peBzzStudent.enumConstByGender.id eq '402880911da481e0011da49697130005'}"> selected="selected" </c:if>>
											女
										</option>
									</select>
								<span class="Validform_checktip"></span>
							</td>
						</tr>
						<tr>
							<td>
								<span class="redfont"></span>民  族
							</td>
							<td class="lefttd">
								<SELECT id="folk" ignore="ignore" datatype="*" name="peBzzStudent.enumConstByFlagFolk.id" style="width: 175px;">
									<OPTION value="">
										---请选择民族---
									</OPTION>
								</SELECT>
								<span class="Validform_checktip"></span>
							</td>
						</tr>
						<tr>
							<td>
								<span class="redfont">*</span>出生日期
							</td>
							<td class="lefttd">
								<input type="text" name="peBzzStudent.birthdayDate" datatype="*"
									value="<fmt:formatDate pattern="yyyy-MM-dd" value="${peBzzStudent.birthdayDate}"/>" 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>学  历
							</td>
							<td class="lefttd">
								<select id="education" name="peBzzStudent.enumConstByFlagEducation.id" datatype="*" 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="peBzzStudent.department" value="${peBzzStudent.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" ignore="ignore" name="peBzzStudent.position" value="${peBzzStudent.position}" id="position" class="inputxt"
									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>手  机
							</td>
							<td class="lefttd">
								<input type="text" name="peBzzStudent.mobilePhone" value="${peBzzStudent.mobilePhone}" onkeypress="KeyPress(this.value);" 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>电  话
							</td>
							<td class="lefttd">
								<input type="text" name="peBzzStudent.phone" value="${peBzzStudent.phone}" id="phone" class="inputxt" datatype="c" errormsg="电话号码格式不正确!"
									maxlength="30" size="30" />
								<span class="Validform_checktip">例如:0712-7827881,58731118</span>
							</td>
						</tr>
						<tr>
							<td>
								传  真
							</td>
							<td class="lefttd">
								<input type="text" ignore="ignore" name="peBzzStudent.fax" value="${peBzzStudent.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="peBzzStudent.email" value="${peBzzStudent.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="peBzzStudent.zipcode" value="${peBzzStudent.zipcode}" id="zipcode" onkeypress="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">
								<select id="prov" name="provcode" onchange="getCitiesByProvCode();" datatype="city">
									<option value="-1">
										请选择
									</option>
								</select>
								<select id="city" name="citycode" onchange="getAreasByCityCode();" style="margin-left: 20px;" datatype="city">
									<option value="-1">
										请选择
									</option>
								</select>
								<select id="area" name="peBzzStudent.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">
								<input type="text" name="peBzzStudent.address" value="${peBzzStudent.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">
								<select id="dp" name="peBzzStudent.enumConstByFlagDepartProperty.id" datatype="*" nullmsg="请选择单位属性" style="width: 175px;">
									<option value="">
										--- 请选择单位属性---
									</option>
								</select>
								<span id="dp" class="Validform_checktip">请选择您的单位属性</span>
							</td>
						</tr>
						<tr>
							<td colspan="3" style="padding-right: 300px;">
								<div>
									<input style="display: none;" type="submit" value="提交" id="sub" />
									<input style="display: none;" type="reset" value="重填" id="res" />
									<input type="hidden" name="peBzzStudent.id" value="${peBzzStudent.id}" />
									<div class="tijiao">
										<a href="javascript:void(0);" onclick="$$('res').click();">重填</a>
									</div>
									<div class="tijiao">
										<a href="javascript:void(0);" onclick="$$('sub').click();">提交</a>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</form>
				<div>
	</body>
	<script type="text/javascript" src="/js/jquery/plugins/validform/Validform.js"></script>
	<script type="text/javascript">
$(function() {
	$(".registerfrm").Validform({
		tiptype:function(msg,o,cssctl){
			if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素,全部验证通过提交表单时o.obj为该表单对象;
				var objtip=o.obj.siblings(".Validform_checktip");//指定错误提示控件
				cssctl(objtip,o.type);
				objtip.text(msg);
			}
		},
		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}$/,//中文,字母,下划线和数字
			"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>