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


Posted in Javascript onAugust 28, 2015

本文实例讲述了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="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实现的用户注册表单提示操作效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
js验证表单大全
2006/11/25 Javascript
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python实现Flappy Bird源码
2018/12/24 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
军训的自我鉴定
2013/12/10 职场文书
社会保险接收函
2014/01/12 职场文书
留学推荐信范文
2014/05/10 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
python字典进行运算原理及实例分享
2021/08/02 Python