本文实例讲述了jquery实现的用户注册表单提示操作效果。分享给大家供大家参考。具体如下：
jQuery实现的用户注册表单上方弹窗提示文字特效源码，是一段不仅可以在输入的表单上方提示注意事项，同时也可以进行输入验证的代码，是一款非常实用的特效代码，值得大家学习。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现的用户注册表单提示操作效果代码如下
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery用户注册表单上方弹窗提示效果</title> <link href="https://www.jb51.net/css/layout.css" type="text/css"> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> </head> <body> <br> <link href="https://www.jb51.net/css/home_login.css" type="text/css"> <div> <div> <div> <h3>用户注册</h3> </div> <div> <form method="post" action="https://www.jb51.net/jiaoben/"> <dl> <dt>用户名</dt> <dd> <input type="text" title="3-20位字符，可由中文、英文、数字及“_”、“-”组成" /> <label></label></dd> </dl> <dl> <dt>设置密码</dt> <dd> <input type="password" title="6-16位字符，可由英文、数字及标点符号组成" /> <label></label></dd> </dl> <dl> <dt>确认密码</dt> <dd> <input type="password" title="请再次输入您的密码" /> <label></label></dd> </dl> <dl> <dt>邮箱</dt> <dd> <input type="text" title="请输入常用的邮箱，将用来找回密码、接受订单通知等" /> <label></label></dd> </dl> <dl> <dt> </dt> <dd> <input type="submit" value="立即注册" title="立即注册" /> <input type="checkbox" value="1" checked="checked" /> <span for="clause">阅读并同意<a href="###" target="_blank" title="阅读并同意">服务协议</a></span> <label></label></dd> </dl> <input type="hidden" value> <input type="hidden" value="206f94ec" /> </form> <div> </div> </div> <div> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/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实现的用户注册表单提示操作效果代码，希望大家可以喜欢。
您可能感兴趣的文章: