利用jQuery實現表單驗證申請代碼



18 69 24



特效描述:利用jQuery實現 表單驗證 申請代碼,利用jQuery實現表單驗證申請代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/main.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tbdValidate.js"></script>
<script type="text/javascript" src="js/upload.js"></script>

3. HTML代碼

<h3 style="font-size:20px; text-align:center; font-weight:bold;">js驗證組件: tbdvalidate</h3>
<br /><br />
<h4 style="font-size:16px; text-align:center; font-weight:bold;">demo1  必填</h4>
<br /><br />
<!--中心-->
<div class="content">
	<div class="login-box">
		<div class="wrap">
			<div class="login-box-cen">
				<br /><br />
				<div class="login-box-cen-form clearfix mar-bottom20">
					<input type="text" class="login-box-cen-form-input w218" placeholder="請輸入手機號" id="login_phone" />
					<label class="err err-top40" id="login_phone_text">手機號錯誤</label>
				</div>
				<div class="login-box-cen-form clearfix mar-bottom20">
					<input type="text" class="login-box-cen-form-input w218" placeholder="請輸入密碼" id="login_password" />
					<label class="err err-top40" id="login_password_text">請輸入密碼</label>
				</div>
				<div class="login-box-cen-form clearfix">
					<input type="submit" value="登錄" class="login-box-cen-form-button w238" id="login_submit" />
				</div>
			</div>
		</div>
	</div>    
</div>
<br /><br />
<h4 style="font-size:16px; text-align:center; font-weight:bold;">demo2  必填+非必填</h4>    
<br /><br />
<!--中心-->
<div class="content">
	<div class="register-box">
		<div class="wrap">
			<div class="register-box-con2">             	
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian">*</em>企業名稱</label>
					<div class="register-box-con2-box-right">
						<input type="text" class="login-box-cen-form-input w358" placeholder="請輸入與工商營業執照一致的公司名稱,不超過20個字" id="reg_info_company">
						<label id="reg_info_company_text"  class="err err-top40">請輸入與工商營業執照一致的公司名稱,不超過20個字</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian"></em>企業網址</label>
					<div class="register-box-con2-box-right">
						<input type="text" class="login-box-cen-form-input w358" placeholder="請輸入正確的網址" id="reg_info_www" />
						<label class="err err-top40" id="reg_info_www_text">請輸入正確的網址</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian"></em>企業地址</label>
					<div class="register-box-con2-box-right">
						<input type="text" class="login-box-cen-form-input w358" placeholder="公司所在地址,不超過40個字" id="reg_info_address" />
						<label class="err err-top40" id="reg_info_address_text">公司所在地址,不超過40個字</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian"></em>企業簡介</label>
					<div class="register-box-con2-box-right">
						<textarea class="login-box-cen-form-textarea w358 h88" id="reg_info_textarea" placeholder="簡介不超過200個字....."></textarea>
						<label class="err err-top90" id="reg_info_textarea_text">簡介不超過200個字</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian">*</em>聯系人</label>
					<div class="register-box-con2-box-right">
						<input type="text" class="login-box-cen-form-input w358" placeholder="請輸入與身份證一致的姓名,不能超過20個字" id="reg_info_name" />
						<label class="err err-top40" id="reg_info_name_text">請輸入與身份證一致的姓名,不能超過20個字</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian">*</em>Email地址</label>
					<div class="register-box-con2-box-right">
						<input type="text" class="login-box-cen-form-input w358" placeholder="請輸入有效郵箱,用于接收平臺審核等重要消息通知" id="reg_info_email" />
						<label class="err err-top40" id="reg_info_email_text">請輸入有效郵箱,用于接收平臺審核等重要消息通知</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20">
					<label class="register-box-con2-box-left"><em class="bitian">*</em>名?片</label>
					<div class="register-box-con2-box-right">
						<label class="register-box-con2-box-upload">
							<input type="file" name="file" id="reg_info_file" />
							<div class="register-box-con2-box-upload-ti"><em id="reg_info_file_w">上傳</em><img id="reg_info_file_base64" style="display:none;"></div>
						</label>
						<p class="register-box-con2-box-pw">1.支持圖片格式JPG/PNG,圖片大小不超過2M</p>
						<p class="register-box-con2-box-pw">2.上傳名片,便于聯系開發者進行審核等重要事項</p>
						<label class="err err-top160" id="reg_info_file_text">支持圖片格式JPG/PNG,圖片大小不超過2M</label>
					</div>
				</div>
				<div class="register-box-con2-box clearfix mar-bottom20 mar-top50">
					<label class="register-box-con2-box-left"></label>
					<div class="register-box-con2-box-right">
						<input type="submit" value="提交申請" class="login-box-cen-form-button w380" id="reg_info_submit" />
					</div>
				</div>
			</div>
		</div>        	
	</div>	
</div>
<br /><br />
<h4 style="font-size:16px; text-align:center; font-weight:bold;">demo3  必填+特殊處理</h4>    
<br /><br />
<!--中心-->
<div class="content">
	<div class="register-box">
		<div class="wrap">
			<div class="register-box-con">
				<div class="register-box-cen-form clearfix mar-bottom20">
					<input type="text" class="login-box-cen-form-input w358" placeholder="請輸入手機號" id="reg_phone" />
					<label class="err err-top40" id="reg_phone_text">手機號錯誤</label>
				</div>
				<div class="register-box-cen-form clearfix mar-bottom20">
					<input type="text" class="login-box-cen-form-input w358" placeholder="設置登錄密碼" id="reg_password" />
					<label class="err err-top40" id="reg_password_text">密碼錯誤</label>
				</div>
				<div class="register-box-cen-form clearfix mar-bottom20">
					<input type="text" class="login-box-cen-form-input w228" placeholder="短信驗證碼" id="reg_mescode" />
					<button class="login-box-cen-form-mes w120 mar-left10" id="reg_mescode_btn" able="able">獲取驗證碼</button>
					<label class="err err-top40" id="reg_mescode_text">短信驗證碼錯誤</label>
				</div>
				<div class="register-box-cen-form clearfix mar-bottom20 mar-top50">
					<input type="submit" value="注冊" class="login-box-cen-form-button w380" id="reg_submit" />
				</div>
			</div>
		</div>        	
	</div>	
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/tbdValidate.js"></script>  
<script type="text/javascript" src="js/upload.js"></script> 
<script type="text/javascript">
	$(function(){
		//demo1
		var regconfig=[
				{eleinput:"login_phone",eletext:"login_phone_text",rule:[{reg:/^.+$/,text:"手機號不能為空"},{reg:/^1[34578]\d{9}$/,text:"手機號格式錯誤"}]},
				{eleinput:"login_password",eletext:"login_password_text",rule:[{reg:/^.+$/,text:"密碼不能為空"}]}
			];
		tbdValidate(
			regconfig,
			{
				elesubmit:"login_submit",//提交按鈕
				funsubmit:function(){//驗證通過可提交回調				
					//信息提交接口
					alert("成功");				
				},
				funerr:function(){//不可提交回調
				},
				funerrlist:function(errlist){
					$('#'+ errlist[0]).focus();
				}	
			}
		);	
		//end
		//demo2
		var regconfig=[
				{eleinput:"reg_info_company",eletext:"reg_info_company_text",rule:[{reg:/^.+$/,text:"企業名稱不能為空"},{reg:/^.{1,20}$/,text:"企業名稱不超過20個字"}]},
				{eleinput:"reg_info_name",eletext:"reg_info_name_text",rule:[{reg:/^.+$/,text:"聯系人不能為空"},{reg:/^.{1,20}$/,text:"聯系人不超過20個字"}]},
				{eleinput:"reg_info_email",eletext:"reg_info_email_text",rule:[{reg:/^.+$/,text:"Email地址不能為空"},{reg:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,text:"Email地址格式錯誤"}]}
			];
		tbdValidate(
			regconfig,
			{
				elesubmit:"reg_info_submit",//提交按鈕
				funsubmit:function(){//驗證通過可提交回調
					if($("#reg_info_file_base64").attr("src")){
						$("#reg_info_file_text").hide();
					}else{
						$("#reg_info_file_text").html('請上傳名片').show();
						return false;
					};	
					//信息提交接口
					alert("成功");			
				},
				funerr:function(){//不可提交回調
					if($("#reg_info_file_base64").attr("src")){
						$("#reg_info_file_text").hide();
					}else{
						$("#reg_info_file_text").html('請上傳名片').show();
						return false;
					};	
				},
				funerrlist:function(errlist){
					$('#'+ errlist[0]).focus();
				}	
			}
		);
		var noregconfig=[
				{eleinput:"reg_info_www",eletext:"reg_info_www_text",rule:[{reg:/(^(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w][email protected])?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w][email protected])[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$)|(^$)/,text:"請輸入正確的網址"}]},
				{eleinput:"reg_info_address",eletext:"reg_info_address_text",rule:[{reg:/^.{0,40}$/,text:"公司所在地址,不超過40個字"}]},
				{eleinput:"reg_info_textarea",eletext:"reg_info_textarea_text",rule:[{reg:/^.{0,200}$/,text:"簡介不超過200個字"}]}
			];
		tbdnoValidate(noregconfig);
		//end
		//demo3
		//獲取短信驗證碼
		var mesdong=null;
		var mestime=60;
		$("#reg_mescode_btn").click(function(){	
			var phoneval=$.trim($("#reg_phone").val());
			if(regconfig[0].rule[0].reg.test(phoneval)){
				$("#reg_phone_text").hide();				
			}else{			
				$("#reg_phone_text").html(regconfig[0].rule[0].text).show();
				$("#reg_phone").focus();
				return false
			};
			if(regconfig[0].rule[1].reg.test(phoneval)){
				$("#reg_phone_text").hide();				
			}else{
				$("#reg_phone").focus();
				$("#reg_phone_text").html(regconfig[0].rule[1].text).show();
				return false
			};
			if($(this).attr('able')=="able"){//發送
				$(this).attr('able',"disable");
				$(this).css('cursor','not-allowed');
				$(this).html(mestime+"s");
				mesdong=setInterval(function(){//倒計時
					mestime-=1;
					if(mestime<0){
						$("#reg_mescode_btn").attr('able',"able");
						$("#reg_mescode_btn").css('cursor','pointer');
						$("#reg_mescode_btn").html('獲取驗證碼');
						mestime=60;
						clearInterval(mesdong);
					}else{
						$("#reg_mescode_btn").html(mestime+"s");			
					};
				},1000);
				//短信發送接口
			}else{
			};
		});	
		//注冊 
		var regconfig=[
				{eleinput:"reg_phone",eletext:"reg_phone_text",rule:[{reg:/^.+$/,text:'手機號不能為空'},{reg:/^1[34578]\d{9}$/,text:'手機號格式錯誤'}]},
				{eleinput:"reg_password",eletext:"reg_password_text",rule:[{reg:/^.+$/,text:'密碼不能為空'},{reg:/^.{6,10}$/,text:'密碼在6-10位之間'}]},
				{eleinput:"reg_mescode",eletext:"reg_mescode_text",rule:[{reg:/^.+$/,text:'短信驗證碼不能為空'},{reg:/^[0-9]{6}$/,text:'輸入6位短信驗證碼'}]}
			];
		tbdValidate(
			regconfig,
			{
				elesubmit:"reg_submit",//提交按鈕
				funsubmit:function(){//驗證通過可提交回調	
					//信息提交接口
					alert("成功");				
				},
				funerr:function(){//不可提交回調
				},
				funerrlist:function(errlist){
					$('#'+ errlist[0]).focus();
				}	
			}
		);	
		//end	
	});
</script>
<div style="text-align:center;margin:-150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 頭像上傳 圖片上傳 文本框 text文本框 驗證碼 表單提交 表單驗證 表單驗證插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 天天麻将下载安装免费 2013最赚钱手游排行 重庆是时时彩开奖 开找工作的中介赚钱呢 彩票合买站点加入 全民红中麻将 豪华车跑什么赚钱 北京pk赛车计划软件最准 秒速时时彩开好技巧 天天麻将赢话费安卓版 福彩3d推荐预测 快乐10分app下载 哪个手机彩票软件好 河南快3计划默默向上游张国荣 贵州快三开奖查询今天 越南美女捕鱼