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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
文章推荐系统(三)
2006/10/09 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
python求质数列表的例子
2019/11/24 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
自我推荐书
2013/12/04 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
综合实践活动总结
2014/05/05 职场文书
卫生系统先进事迹
2014/05/13 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
新员工入职感想
2015/08/07 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python