jQuery用戶注冊表單驗證頁面代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代碼

<div class="aui-register-popup">
	<div class="aui-register-box">
		<div class="aui-register-link">
			<a href="javascript:;" class="fl">返回首頁</a>
			<a href="javascript:;" class="fr">已有賬號？去登錄</a>
		</div>
		<div class="aui-register-logo">
			<img src="images/logo.png" alt="">
		</div>
		<div class="aui-register-form" id="verifyCheck">
			<form action="">
				<div class="aui-register-form-item">
					<input type="text" name="phone" placeholder="手機號碼" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>請輸入手機號||<i class='icon-tips'></i>手機號碼格式不正確" maxlength="11" id="phone">
					<label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您還未輸入手機號</div></label>
					<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>
					<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" >獲取動態(tài)碼</span>
				</div>
				<div class="aui-register-form-item">
					<input type="text" placeholder="動態(tài)碼" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>請?zhí)顚懻_的手機動態(tài)碼||<i class='icon-tips'></i>請?zhí)顚?位手機動態(tài)碼">
					<label class="focus valid"></label>
				</div>
				<div class="aui-register-form-item">
					<input type="text" name="username" maxlength="20"  placeholder="賬戶名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您還沒有輸入賬戶名||<i class='icon-tips'></i>用戶名長度3-20位||<i class='icon-tips'></i>只能輸入字母、數(shù)字、且以中文或字母開頭" id="adminNo">
					<label class="focus valid"></label>
				</div>
				<div class="aui-register-form-item">
					<input type="password" name="password" placeholder="設置密碼" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密碼太短，最少6位||<i class='icon-tips'></i>密碼長度6-20位||<i class='icon-tips'></i>密碼太簡單，有被盜風險，建議字母+數(shù)字的組合">
					<label class="focus valid"></label>
				</div>
				<div class="aui-register-form-item">
					<input type="password" name="password" placeholder="確認密碼" maxlength="20" class="txt05 f-r3 required" tabindex="5" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="<i class='icon-tips'></i>密碼太短，最少6位||<i class='icon-tips'></i>密碼長度6-16位||<i class='icon-tips'></i>兩次密碼輸入不一致" id="rePassword">
					<label class="focus valid"></label>
				</div>
				<div class="aui-register-form-item">
					<div class="protocol">注冊即同意<a  href="#">《用戶使用協(xié)議》</a>&<a href="#">《隱私權條款》</a></div>
					<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" value="注冊" >
				</div>
			</form>
		</div>
		<div class="aui-register-bottom">
			<a>?17.com</a>
			<a href="#">聯(lián)系客服</a>
			<a href="#">幫助中心</a>
			<div class="clear"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(function() {

	$("#aui-btn-reg").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你！注冊成功')

	});
});
</script>