利用jQuery實現用戶注冊提示效果



44 174 59



特效描述:利用jQuery實現 用戶注冊 提示效果,利用jQuery實現用戶注冊提示效果

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.poshytip.min.js" charset="utf-8"></script>

3. HTML代碼

<br>
<div class="nc-login-layout">
	<div class="nc-login">
		<div class="nc-login-title">
			<h3>用戶注冊</h3>
		</div>
		<div class="nc-login-content">
			<form id="register_form" method="post" action="http://51qianduan.com/">
				<dl>
					<dt>用戶名</dt>
					<dd style="min-height:54px;">
					<input type="text" id="user_name" name="user_name" class="text tip" title="3-20位字符,可由中文、英文、數字及“_”、“-”組成" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>設置密碼</dt>
					<dd style="min-height:54px;">
					<input type="password" id="password" name="password" class="text tip" title="6-16位字符,可由英文、數字及標點符號組成" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>確認密碼</dt>
					<dd style="min-height:54px;">
					<input type="password" id="password_confirm" name="password_confirm" class="text tip" title="請再次輸入您的密碼" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>郵箱</dt>
					<dd style="min-height:54px;">
					<input type="text" id="email" name="email" class="text tip" title="請輸入常用的郵箱,將用來找回密碼、接受訂單通知等" />
					<label></label></dd>
				</dl>
				<dl>
					<dt>&nbsp;</dt>
					<dd>
					<input type="submit" name="Submit" value="立即注冊" class="submit fl" title="立即注冊" />
					<input name="agree" type="checkbox" class="fl mt10 ml10" id="clause" value="1" checked="checked" />
					<span for="clause" class="fl ml5">閱讀并同意<a href="document-agreement.html" target="_blank" class="agreement" title="閱讀并同意">服務協議</a></span>
					<label></label></dd>
				</dl>
				<input type="hidden" value name="ref_url">
				<input name="nchash" type="hidden" value="206f94ec" />
			</form>
			<div class="clear">
			</div>
		</div>
		<div class="nc-login-bottom">
		</div>
	</div>
</div>
<script>
//注冊表單提示
$('.tip').poshytip({
	className: 'tip-yellowsimple',
	showOn: 'focus',
	alignTo: 'target',
	alignX: 'center',
	alignY: 'top',
	offsetX: 0,
	offsetY: 5,
	allowTipHover: false
});
//注冊表單驗證
$(function(){
		jQuery.validator.addMethod("lettersonly", function(value, element) {
			return this.optional(element) || /^[^:%,'\*\"\s\<\>\&]+$/i.test(value);
		}, "Letters only please"); 
		jQuery.validator.addMethod("lettersmin", function(value, element) {
			return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length>=3);
		}, "Letters min please"); 
		jQuery.validator.addMethod("lettersmax", function(value, element) {
			return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length<=15);
		}, "Letters max please");
    $("#register_form").validate({
        errorPlacement: function(error, element){
            var error_td = element.parent('dd');
            error_td.find('label').hide();
            error_td.append(error);
        },
        submitHandler:function(form){
            ajaxpost('register_form', '', '', 'onerror') 
        },
        rules : {
            user_name : {
                required : true,
                lettersmin : true,
                lettersmax : true,
                lettersonly : true,
                remote   : {
                    url :'index.php?act=login&op=check_member&column=ok',
                    type:'get',
                    data:{
                        user_name : function(){
                            return $('#user_name').val();
                        }
                    }
                }
            },
            password : {
                required : true,
                minlength: 6,
				maxlength: 20
            },
            password_confirm : {
                required : true,
                equalTo  : '#password'
            },
            email : {
                required : true,
                email    : true,
                remote   : {
                    url : 'index.php?act=login&op=check_email',
                    type: 'get',
                    data:{
                        email : function(){
                            return $('#email').val();
                        }
                    }
                }
            },
			            captcha : {
                required : true,
                minlength: 4,
                remote   : {
                    url : 'index.php?act=seccode&op=check&nchash=206f94ec',
                    type: 'get',
                    data:{
                        captcha : function(){
                            return $('#captcha').val();
                        }
                    }
                }
            },
			            agree : {
                required : true
            }
        },
        messages : {
            user_name : {
                required : '用戶名不能為空',
                lettersmin : '用戶名必須在3-15個字符之間',
                lettersmax : '用戶名必須在3-15個字符之間',
				lettersonly: '用戶名不能包含敏感字符',
				remote	 : '該用戶名已經存在'
            },
            password  : {
                required : '密碼不能為空',
                minlength: '密碼長度應在6-20個字符之間',
				maxlength: '密碼長度應在6-20個字符之間'
            },
            password_confirm : {
                required : '請再次輸入您的密碼',
                equalTo  : '兩次輸入的密碼不一致'
            },
            email : {
                required : '電子郵箱不能為空',
                email    : '這不是一個有效的電子郵箱',
				remote	 : '該電子郵箱已經存在'
            },
			            captcha : {
                required : '請輸入驗證碼',
                minlength: '驗證碼不正確',
				remote	 : '驗證碼不正確'
            },
			            agree : {
                required : '請閱讀并同意該協議'
            }
        }
    });
});
</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 提示框/彈出層 文本框 text文本框 復選框 復選按鈕 復選框美化 注冊框 表單提交
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表