利用jquery实现表单验证特效



11 41 14



特效描述:利用jquery实现 表单验证特效,利用jquery实现表单验证特效

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/Validate.js"></script>
<script type="text/javascript" src="js/Validate.form.js"></script>

3. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.form label, .form input, .form select, .form textarea, .form button, .form .label{float:left;font-size:12px;}
.fl{float:left;}.fr{float:right;}.fn{float:none;}
.hide{display:none;}.invisible{visibility:hidden;}.overflow{overflow:hidden;}
.clear{display:block;clear:both;height:0;overflow:hidden;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
/* yellow_button */
.yellow_button{background:url(images/yellow_button.png);border:none;cursor:pointer;height:36px;line-height:36px; overflow:hidden; display:inline-block; text-align:center; font-size:14px; font-weight:800; color:#fff;background-position:0 0;width:139px;}
#registsubmit.disabled{background-position:0 -36px;cursor:default!important;}
.red{color:#ff0000;font-family:"宋体";font-weight:normal;}
/* formbox */
#formbox{padding:20px;border:solid 1px #D1D1D1;margin:20px auto;width:880px;}
#formbox h3{font-size:16px;height:32px;color:#3366cc;font-weight:800;border-bottom:solid 1px #D1D1D1;margin:0 0 20px 0;padding:0 10px;}
#formbox .item{padding-top:5px;height:50px;overflow:hidden;line-height:26px;}
#formbox .item a:link,#formbox .item a:visited{text-decoration:underline;}
#formbox .label{width:300px;text-align:right;font-size:14px;}
#formbox .span-150{width:150px;}
#formbox .text{width:240px;height:16px;padding:4px 3px;border:1px solid #bbb;font-size:14px;font-family:arial,"宋体";}
#formbox .text-1{width:100px;}
#formbox .blank{width:16px;height:16px;margin:2px 5px 0;}
#formbox .img img{height:26px;margin:0 5px;}
#formbox .succeed{background:url(images/pwdstrength.gif) no-repeat -105px 0;}
#formbox .yellow_button{font-size:14px;font-weight:bold;color:#fff;border:none;cursor:pointer;}
#formbox .highlight1{border:1px solid #EFA100;outline:2px solid #FFDC97;*border:2px solid #ffcc66;*padding:3px 2px;}
#formbox .highlight2{border:1px solid #f00;outline:1px solid #FFC1C1;color:#f00;}
#formbox .pwdbg{background:#FFF8EB;}
#formbox .focus{color:#999;line-height:22px;*line-height:20px;}
#formbox .null,#formbox .error{color:red;line-height:22px;*line-height:20px;}
#formbox .checkbox{margin-top:6px;*margin-top:2px;}
#formbox #referrer{color:#999;font-size:12px;}
#formbox #protocol{margin:0px 5px 0 0;display:inline;}
#pwdstrength{color:#999;line-height:22px;padding-right:10px;}
#pwdstrength b{float:left;width:104px;height:13px;overflow:hidden;margin-top:5px;*margin-top:3px;}
.strengthA b{background:url(images/pwdstrength.gif) no-repeat 0 0;}
.strengthB b{background:url(images/pwdstrength.gif) no-repeat 0 -13px;}
.strengthC b{background:url(images/pwdstrength.gif) no-repeat 0 -26px;}
</style>
<div id="formbox">
	<form id="formpersonal" method="post" onsubmit="return false;">
	<div class="form">
		<h3>帐户信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>用户名:</span>
			<div class="fl">
				<input type="text" id="username" name="username" class="text" tabindex="1" />
				<label id="username_succeed" class="blank"></label>
				<span class="clear"></span>
				<div id="username_error"></div>
			</div>
		</div><!--item end-->
		<div id="o-password">
			<div class="item">
				<span class="label"><span class="red">*</span>设置密码:</span>
				<div class="fl">
					<input type="password" id="pwd" name="pwd" class="text" tabindex="2"/>
					<label id="pwd_succeed" class="blank"></label>
					<input type="checkbox" class="checkbox" id="viewpwd"/>
					<label class="ftx23" for="viewpwd">显示密码字符</label>
					<span class="clear"></span>
					<label class="hide" id="pwdstrength"><span class="fl">安全程度:</span><b></b></label>
					<label id="pwd_error"></label>
				</div>
			</div><!--item end-->
			<div class="item">
				<span class="label"><span class="red">*</span>确认密码:</span>
				<div class="fl">
					<input type="password" id="pwd2" name="pwd2" class="text" tabindex="3"/>
					<label id="pwd2_succeed" class="blank"></label>
					<span class="clear"></span>
					<label id="pwd2_error"></label>
				</div>
			</div><!--item end-->
		</div><!--o-password end-->
		<div class="item">
			<span class="label"><span class="red">*</span>邮箱:</span>
			<div class="fl">
				<input type="text" id="mail" name="mail" class="text" tabindex="4"/>
				<label id="mail_succeed" class="blank"></label>
				<span class="clear"></span>
				<div id="mail_error"></div>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label">推荐人用户名:</span>
			<div class="fl">
				<input type="text" id="referrer" name="referrer" class="text" value=可不填 tabindex="5" />
				<label id="referrer_succeed" class="blank invisible"></label>
				<span class="clear"></span>
				<label id="referrer_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>验证码:</span>
			<div class="fl">
				<input type="text" id="authcode" name="authcode" class="text text-1" autocomplete="off" MaxLength="6" tabindex="6" />
				<label class="img"><img id="JD_Verification1" Ver_ColorOfNoisePoint="#888888" src="http://www.mailuke.com/Inc/Code/adminCode.php?sesstr=regCode" onClick="chanageCode('regCode')" alt="" style="cursor:pointer;width:100px;height:26px;"/>
				</label>
				<label>&nbsp;看不清?点击验证码图片更换</label>
				<label id="authcode_succeed" class="blank invisible"></label>
				<span class="clear"></span>
				<label id="authcode_error"></label>
			</div>
		</div><!--item end-->
		<h3>联系人信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>联系人姓名:</span>
			<div class="fl">
				<input type="text" id="realname" name="realname" class="text" tabindex="7"/>
				<label id="realname_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="realname_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>所在部门:</span>
			<div class="fl">
				<select rel="select" id="department" name="department" tabindex="8">
					<option value="-1"  >请选择</option>
					<option value="1"  >办公室</option>
					<option value="2"  >市场部</option>
					<option value="3"  >采购部</option>
					<option value="4"  >技术部</option>
					<option value="5"  >人力资源</option>
					<option value="6"  >其他</option>
				</select>
				<label id="department_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="department_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>固定电话:</span>
			<div class="fl">
				<input type="text" id="tel" name="tel" class="text" value="" tabindex="9" />
				<label id="tel_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="tel_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>手机:</span>
			<div class="fl">
				<input type="text" id="mobile" name="mobile" class="text" value="" tabindex="10" />
				<label id="mobile_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="mobile_error"></label>
			</div>
		</div><!--item end-->
		<h3>公司信息</h3>
		<div class="item">
			<span class="label"><span class="red">*</span>公司名称:</span>
			<div class="fl">
				<input type="text" id="companyname" name="companyname" class="text" tabindex="11"/>
				<label id="companyname_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companyname_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>公司地址:</span>
			<div class="fl">
				<input type="text" id="companyaddr" name="companyaddr" class="text" tabindex="12" />
				<label id="companyaddr_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companyaddr_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>购买类型/用途:</span>
			<div class="fl">
				<input id="purpose1" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="1" />
				<label class="pad" for="purpose1">IT设备</label>
				<input id="purpose2" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="2" />
				<label class="pad" for="purpose2">数码通讯</label>
				<input id="purpose3" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="3" />
				<label class="pad" for="purpose3">办公用品耗材</label>
				<input id="purpose4" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="4" />
				<label class="pad" for="purpose4">大家电</label>
				<input id="purpose5" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="5" />
				<label class="pad" for="purpose5">项目合作-政府采购</label>
				<input id="purpose6" tabindex="13" class="checkbox" name="purposetype" runant="server" type="checkbox" value="6" />
				<label class="pad" for="purpose6">礼品</label>
				<input id="purpose" type="hidden" value="" />
				<label id="purpose_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="purpose_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label"><span class="red">*</span>公司网址:</span>
			<div class="fl">
				<input type="text" id="companysite" name="companysite" class="text" tabindex="14"/>
				<label id="companysite_succeed" class="blank"></label>
				<span class="clear"></span>
				<label id="companysite_error"></label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label">&nbsp;</span>
			<div class="fl">
				<input type="checkbox" name="protocol" id="protocol" tabindex="7" /><label for="protocol">网站用户注册协议</label>
			</div>
		</div><!--item end-->
		<div class="item">
			<span class="label">&nbsp;</span>
			<input type="button" class="yellow_button disabled" id="registsubmit" value="提交注册信息" tabindex="8" disabled="disabled" />
		</div><!--item end-->
	</div>
	</form>
</div><!--formbox end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 下拉框 select下拉菜单 select美化 select美化框 表单验证 表单验证插件
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到