本文實例講述了jquery實現(xiàn)的用戶注冊表單提示操作效果。分享給大家供大家參考。具體如下：
jQuery實現(xià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://www.dbjr.com.cn/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ù)字及標點符號組成" />
 <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="###" 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)的用戶注冊表單提示操作效果代碼，希望大家可以喜歡。

您可能感興趣的文章: