您的位置：首页 > 其它

validform表单验证插件最终版

2015-07-09 14:28 232 查看

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

报名界面：

[html] view plain copy print ?

<%@ 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中，比如这样一个：

[javascript] view plain copy print ?

var location_edus =[{"id":"education01","n":"初中"},{"id":"education02","n":"高中"},{"id":"education03","n":"职高"},{"id":"education04","n":"中专"},{"id":"education05","n":"技校"},{"id":"education06","n":"大专"},{"id":"education07","n":"本科"},{"id":"education08","n":"硕士"},{"id":"education09","n":"博士"}];

修改界面：

[html] view plain copy print ?

<%@ 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>

转载自 /article/1654383.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航