本文實例講述了jquery實現(xiàn)的用戶注冊表單提示操作效果。分享給大家供大家參考。具體如下：
jQuery實現(xiàn)的用戶注冊表單上方彈窗提示文字特效源碼，是一段不僅可以在輸入的表單上方提示注意事項，同時也可以進(jìn)行輸入驗證的代碼，是一款非常實用的特效代碼，值得大家學(xué)習(xí)。
運(yùn)行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery實現(xiàn)的用戶注冊表單提示操作效果代碼如下
<!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://m.survivalescaperooms.com/jiaoben/"> <dl> <dt>用戶名</dt> <dd style="min-height:54px;"> <input type="text" id="user_name" name="user_name" class="text tip" title="3-20位字符，可由中文、英文、數(shù)字及“_”、“-”組成" /> <label></label></dd> </dl> <dl> <dt>設(shè)置密碼</dt> <dd style="min-height:54px;"> <input type="password" id="password" name="password" class="text tip" title="6-16位字符，可由英文、數(shù)字及標(biāo)點符號組成" /> <label></label></dd> </dl> <dl> <dt>確認(rèn)密碼</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="閱讀并同意">服務(wù)協(xié)議</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 : '該用戶名已經(jīng)存在' }, password : { required : '密碼不能為空', minlength: '密碼長度應(yīng)在6-20個字符之間', maxlength: '密碼長度應(yīng)在6-20個字符之間' }, password_confirm : { required : '請再次輸入您的密碼', equalTo : '兩次輸入的密碼不一致' }, email : { required : '電子郵箱不能為空', email : '這不是一個有效的電子郵箱', remote : '該電子郵箱已經(jīng)存在' }, captcha : { required : '請輸入驗證碼', minlength: '驗證碼不正確', remote : '驗證碼不正確' }, agree : { required : '請閱讀并同意該協(xié)議' } } });});</script></body></html>以上就是為大家分享的jquery實現(xiàn)的用戶注冊表單提示操作效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
