快捷導(dǎo)航

jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果代碼分享

更新時(shí)間：2015年08月28日 10:07:29 投稿：lijiao

這篇文章主要介紹了jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果。分享給大家供大家參考。具體如下：
jQuery實(shí)現(xiàn)的用戶注冊(cè)表單上方彈窗提示文字特效源碼，是一段不僅可以在輸入的表單上方提示注意事項(xiàng)，同時(shí)也可以進(jìn)行輸入驗(yàn)證的代碼，是一款非常實(shí)用的特效代碼，值得大家學(xué)習(xí)。
運(yùn)行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果代碼如下

<!doctype html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery用戶注冊(cè)表單上方彈窗提示效果</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>用戶注冊(cè)</h3>
 </div>
 <div class="nc-login-content">
 <form id="register_form" method="post" action="http://www.fzitv.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位字符，可由中文、英文、數(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)點(diǎn)符號(hà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="請(qǐng)?jiān)俅屋斎肽拿艽a" />
 <label></label></dd>
 </dl>
 <dl>
 <dt>郵箱</dt>
 <dd style="min-height:54px;">
 <input type="text" id="email" name="email" class="text tip" title="請(qǐng)輸入常用的郵箱，將用來找回密碼、接受訂單通知等" />
 <label></label></dd>
 </dl>

 <dl>
 <dt>&nbsp;</dt>
 <dd>
 <input type="submit" name="Submit" value="立即注冊(cè)" class="submit fl" title="立即注冊(cè)" />
 <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>
//注冊(cè)表單提示
$('.tip').poshytip({
 className: 'tip-yellowsimple',
 showOn: 'focus',
 alignTo: 'target',
 alignX: 'center',
 alignY: 'top',
 offsetX: 0,
 offsetY: 5,
 allowTipHover: false
});

//注冊(cè)表單驗(yàn)證
$(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個(gè)字符之間',
  lettersmax : '用戶名必須在3-15個(gè)字符之間',
 lettersonly: '用戶名不能包含敏感字符',
 remote : '該用戶名已經(jīng)存在'
  },
  password : {
  required : '密碼不能為空',
  minlength: '密碼長(zhǎng)度應(yīng)在6-20個(gè)字符之間',
 maxlength: '密碼長(zhǎng)度應(yīng)在6-20個(gè)字符之間'
  },
  password_confirm : {
  required : '請(qǐng)?jiān)俅屋斎肽拿艽a',
  equalTo : '兩次輸入的密碼不一致'
  },
  email : {
  required : '電子郵箱不能為空',
  email : '這不是一個(gè)有效的電子郵箱',
 remote : '該電子郵箱已經(jīng)存在'
  },
  captcha : {
  required : '請(qǐng)輸入驗(yàn)證碼',
  minlength: '驗(yàn)證碼不正確',
 remote : '驗(yàn)證碼不正確'
  },
  agree : {
  required : '請(qǐng)閱讀并同意該協(xié)議'
  }
 }
 });
});
</script>


</body>
</html>

以上就是為大家分享的jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果代碼，希望大家可以喜歡。

您可能感興趣的文章: