利用jQuery实现用户注册提示效果



50 197 66



特效描述:利用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

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