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>javascript
<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>密 碼
</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指示提示的狀態，值爲一、二、三、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>
css
- 1. Validform表單驗證總結
- 2. Validform表單驗證時的 【坑】
- 3. validform表單驗證插件最終版
- 4. JavaScript 之表單驗證（表單驗證器的封裝）
- 5. validform驗證以後，使用ajax提交表單
- 6. 表單驗證插件Validform使用筆記
- 7. 不是一般地好用的jquery表單驗證插件-Validform
- 8. Validform 實時驗證表單某一個元素
- 9. 12、jQuery插件之Validform表單驗證插件
- 10. 簡單易用的表單驗證插件Validform - 一行代碼搞定整站的表單驗證！
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。