jquery实现的用户注册表单提示操作效果代码分享

本文实例讲述了jquery实现的用户注册表单提示操作效果。分享给大家供大家参考。具体如下：
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>

以上就是为大家分享的jquery实现的用户注册表单提示操作效果代码，希望大家可以喜欢。