编程 Javascript

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

Posted in Javascript onAugust 28, 2015

本文实例讲述了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="https://3water.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位字符，可由中文、英文、数字及“_”、“-”组成" />
 <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实现的用户注册表单提示操作效果代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery与ExtJS之选择实例分析

Aug 19 Javascript

JavaScript(js)设置默认输入焦点(focus)

Dec 28 Javascript

jquery中选择块并改变属性值的方法

Jul 31 Javascript

javaScript实现浮点数转十六进制字符

Oct 29 Javascript

用javascript关闭本窗口技巧小结

Sep 05 Javascript

js生成验证码并直接在前端判断

May 15 Javascript

JavaScript判断按钮被点击的方法

Dec 13 Javascript

javascript HTML5文件上传FileReader API

Mar 27 Javascript

assert()函数用法总结(推荐)

Jan 25 Javascript

node.js支持多用户web终端实现及安全方案

Nov 29 Javascript

node.js将MongoDB数据同步到MySQL的步骤

Dec 10 Javascript

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

Oct 19 Javascript

js实现横向伸展开的二级导航菜单代码

Aug 28 #Javascript

谈谈JavaScript中function多重理解

Aug 28 #Javascript

jquery衣服颜色选取插件效果代码分享

Aug 28 #Javascript

jQuery表单验证功能实例

Aug 28 #Javascript

jquery实现带缩略图的可定制高度画廊效果（5种）

Aug 28 #Javascript

通过XMLHttpRequest和jQuery实现ajax的几种方式

Aug 28 #Javascript

jQuery实现平滑滚动的标签分栏切换效果

Aug 28 #Javascript