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实现的用户注册表单提示操作效果代码，希望大家可以喜欢。
相关推荐
-
易操作的jQuery表单提示插件
本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法 引入核心文件 <script src="js/jquery/2.1.1/jquery.min.
-
jQuery 表单验证插件formValidation实现个性化错误提示
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
-
jQuery表单获取和失去焦点输入框提示效果的实例代码
复制代码 代码如下: $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦
-
解决jquery submit()提交表单提示：f[s] is not a function
jquery submit()无法提交表单 报错:f[s] is not a function, js submit()无法提交表单 报错:document.getElementByIdx_x(...).submit is not a function 这2个错让人很无奈啊,语法没有任何错误,怎么能报错呢? 因为以前重来没有遇到过,这次是在改别人的代码,回头看了看代码,我靠原来有个按钮的name="submit",把它删掉就能正常提交表单了. 为什么呢?应该是一个type="
-
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las
-
jquery实现表单输入时提示文字滑动向上效果
本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g
-
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest). 二.前言 研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但是都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了Bug并修复需要
-
jquery实现的用户注册表单提示操作效果代码分享
本文实例讲述了jquery实现的用户注册表单提示操作效果.分享给大家供大家参考.具体如下: jQuery实现的用户注册表单上方弹窗提示文字特效源码,是一段不仅可以在输入的表单上方提示注意事项,同时也可以进行输入验证的代码,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分
-
jQuery实现表单步骤流程导航代码分享
本文实例讲述了jQuery实现表单步骤流程导航.分享给大家供大家参考.具体如下: jQuery表单步骤流程导航是一款多步骤进度,多个提交的实现一步一步填写表单提交信息代码,每次填写完信息时都会提醒是否提交,如果想对信息进行再次修改,也可以进行返回操作,页面效果简洁大方,红黑搭配很经典,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家
-
jQuery仿360导航页图标拖动排序效果代码分享
jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE
-
jquery左右全屏大尺寸多图滑动效果代码分享
本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换
-
jquery实现LED广告牌旋转系统图片切换效果代码分享
本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转
-
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
这是一款基于jquery实现的漫天雪花飞舞的圣诞祝福雪花效果代码,雪花的大小可以进行切换,用户还可以更改背景图片,是一款非常实用的幻灯片特效源码. 漫天雪花飞舞的jquery圣诞祝福雪花效果,集中不同的效果可以点击选择,请欣赏. 效果演示 源码下载(浏览器中如果不能正常运行,可以尝试切换浏览模式或者选择直接下载) 为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码如下 <!DOCTYPE html> <html> <head> <script type=&
-
yii用户注册表单验证实例
本文实例讲述了yii用户注册表单验证实现方法.分享给大家供大家参考,具体如下: 视图层:register.php <?php //使用小物件生成form元素 $form=$this->beginWidget('CActiveForm'); ?> <!--用户名--> <?php echo $form->labelEx($model,'username');?> <?php echo $form->textField($model,'usernam
-
jQuery实现购物车表单自动结算效果实例
本文实例讲述了jQuery实现购物车表单自动结算效果.分享给大家供大家参考.具体如下: 这里jQuery实现购物车表单自动结算,只要用户把所购商品的数量输入进去,就可以适时计算出商品总额,金额+运费,类似淘宝的购物车结算功能,计算过程是适时的,用jquery实现了Ajax不刷新网页就计算的功能,做购物类网站的或许可以用上这个例子. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
-
jquery实现简单的表单验证
jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路: 先为每一个required添加必填的标记,用each()方法来实现. 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面. 这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素. 然后为input元素添加失去焦点事件.然后进行用户名.邮件的验证. 这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证. 在jQ
-
js实现表单检测及表单提示的方法
本文实例讲述了js实现表单检测及表单提示的方法.分享给大家供大家参考.具体如下: 这是个实用的表单判断以及表单提示效果,如果点击需要输入文字的时候,提示就会跑出来,提示框的形状比较个性化,有一个三角符号指向输入框,有两张图片需要下载. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM