本文實例講述了jquery實現的使用者註冊表單提示操作效果。分享給大家供大家參考。具體如下：
jQuery實現的使用者註冊表單上方彈跳視窗提示文字特效原始碼，是一段不僅可以在輸入的表單上方提示注意事項，同時也可以進行輸入驗證的程式碼，是一款非常實用的特效程式碼，值得大家學習。
運作效果圖： -------------------查看效果 --------
小提示：瀏覽器中如果無法正常運作，可以嘗試切換瀏覽模式。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery用户注册表单上方弹窗提示效果</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<br>
<link href="css/home_login.css" rel="stylesheet" type="text/css">
<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://www.jb51.net/jiaoben/">
<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> </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="###" 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 type="text/javascript" src="js/jquery.poshytip.min.js" charset="utf-8"></script>
<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>
</body>
</html>
