超详细的php用户注册页面填写信息完整实例(附源码)


Posted in PHP onNovember 17, 2015

注册页面是大多数网站必备的页面,所以很有必要对自己的注册页面做些精心的设计。下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的JS文件。

超详细的php用户注册页面填写信息完整实例(附源码)

一、给每个输入框写下说明

超详细的php用户注册页面填写信息完整实例(附源码)

在用户看到这个输入框的时候,就能非常清晰的明白这个输入框是做啥用的,最大限度的降低他们产生疑惑的可能性。我们需要假设用户毫不了解注册需要输入的内容,随后给他们足够的信息以便帮助他们理解。

 二、小图标icon

Icon是增强内容的工具,而且能给访客一个很好的暗示。以前使用小图标都是用图片,用图片的话,很多时候那些对齐、宽度高度搞起来特麻烦,这次我将图标做成字体,操作字体可比操作图片容易很多。可以到国外的一个网站icomoon制作图标字体,不过这个网站打开起来比较慢,需要耐心等待。利用在线资源,接受新思想与新技术,让工作变得越来越简单。

超详细的php用户注册页面填写信息完整实例(附源码)这些小图标都是从icomoon网站上面导出的。这种方式操作对齐,大小非常方便,不过IE6和IE7不支持选择器before(关于选择器的浏览器兼容可以参考这里),所以在这两个浏览器中将不能显示这个图标。

<font class="ficomoon icon-signup"></font>注册新用户
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff?-fl11l') format('woff'),
 url('fonts/icomoon.ttf?-fl11l') format('truetype'),
 url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-print:before {content: "\e601"}

 三、输入框还可输入的字符数

超详细的php用户注册页面填写信息完整实例(附源码)

过去我会给输入框设置一个最大字数的属性限制,这是一种比较粗暴的方式,因为在输入到一定字符后,突然不能输入了,感觉就像是键盘一下子失灵了,没有任何征兆。

现在通过这个设置,首先能让用户知道这里有字数限制,其次能够让用户清楚的知道何时会达到这个限制,很好的提升了友好度。这里面还做了另外一个小操作,就是在输入到一些字符后,将出现变红色,警示用户马上要超过额定字数了。

这是一种poka-yoke的概念,意思就是防止错误,有两种含义:侦测机制与预防机制。

加入简单的字符计数器便能把一个潜在的错误转变成另一个“原来使用这个产品只需常识”的瞬间。

function _textLimit(options, value) {
 var length = value.length;
 var color = options.normal;
 var remind = options.len - length;
 if(remind > 0 && remind <= options.limit) {
 color = options.warnning;
 }
 if(remind < 0) {
 var txt = $('#' + options.inputId);
 txt.val(value.substr(0, options.len));
 remind = 0;
 }
 
 $('#' + options.digitalId).html(remind).css({"color": color, "font-size": options.fontSize});
 }

四、输入正确与错误都给予反馈

超详细的php用户注册页面填写信息完整实例(附源码)

除了检测到错误时立即显示友好的提示信息之外,告诉用户“一切都没有问题”同样也很重要。

设想一下,当你急切的在向某人询问一些信息的时候,肯定是希望能马上得到响应的回答。

当用户输入正确的时候,就应该表示表示,给他们一个绿色的勾,鼓励一下;当输入错误的时候,给他们一个红色的差,告诉他们错误的理由,让他们做相应的修改。这里的勾和差我都是使用的图标字体,对齐的时候特别方便。

.ico_correct{color:#01b60e;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em}
.ico_correct:before {content: "\f00c"}
.ico_error{color:#ff0000;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em}
.ico_error:before {content: "\f00d"}

五、邮箱做自动匹配

这种邮箱自动化匹配,既能减少用户的输入错误,也能提高用户输入的效率。让用户是在“做正确的事”。下拉列表中的红色能够凸显出匹配值与输入值的区别,便于识别。

从网上查到了相关的JS脚本代码,自己再做了一点小修改,集成到我的代码中。这里小编还有一篇超全的邮箱自动化匹配的文章分享给大家:《jquery实现邮箱自动填充提示功能》

 超详细的php用户注册页面填写信息完整实例(附源码)

六、密码强度

超详细的php用户注册页面填写信息完整实例(附源码)

密码强度检测是为了给用户一个善意的提醒,希望用户对自己信息有更强的保护心理。所以即使密码为弱,也不应该影响数据提交。三种等级在下面会显示不同的提示语,会提示用户增加密码强度,或鼓励用户将密码强度更进一步,或肯定这个密码的强度。

密码强度在网上有很多插件,但是这次我自己写CSS,然后自己做匹配强度,这样做是为了能更好的集成到我的网站页面中。不同强度显示不同的颜色块与提示。

regex.checkPwdStrong = function(str) {//密码强度是否为强
 var rule = /^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g;
 return rule.test(str);
};
regex.checkPwdMedium = function(str) {//密码强度是否为中等
 var rule = /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g;
 return rule.test(str);
};
regex.checkPwdPoor = function(str) {//密码强度是否为弱
 var rule = /(?=.{6,}).*/g;
 return rule.test(str);
};
.pwd_complex{padding:5px 0;height:15px}
.pwd_complex span{height:6px;width:80px;margin-right:5px;display:inline-block;border:1px solid #c2c2c2;overflow:hidden}
.pwd_complex .strong{border:1px solid #45ac07;background:#61cc1f}
.pwd_complex .strong_word{color:#45ac07}
.pwd_complex .medium{border:1px solid #45ac07;background:#9AF518}
.pwd_complex .medium_word{color:#61cc1f}
.pwd_complex .poor{border:1px solid #FF9C3A;background:#FFCA92}
.pwd_complex .poor_word{color:#FF9C3A}

这里小编再给大家推荐一篇超全的邮箱密码强度验证的的文章分享给大家:《jquery判断密码强度的验证代码》

七、控制注册按钮

超详细的php用户注册页面填写信息完整实例(附源码)

选中与不选中我本来做的是另外一个效果,就是没选中的时候将马上注册这个按钮隐藏掉,但后面觉得不妥,如果用户不小心将选中框取消,按钮又突然消失了,会使用户疑惑,有可能他们就终止注册或者刷新页面,重新输入相应的内容,无论做哪种操作,都会让用户感到不愉快。

后面我就想到将按钮变灰,在html中被禁用的 input 默认显示灰色,利用了一下用户的一些习惯。让按钮存在于页面上,暗示用户还有操作没完成,这里其实倒是可以再加些小提示,明确哪里没有做好,我偷懒了下没有做那种提示。

服务条款下面我用虚线标识了一下,并且在移上去的时候显示手的图标,暗示用户这里可以点击,点击服务条款弹出一个内容层,里面是协议内容,我没有做打开一张新页面那种提醒方式,我觉得这种时候用户的注意力应该集中在当前页面,而不是新开一个窗口,再去浏览那里的信息,分散了他的注意力,还有就是新开了一个窗口浏览器又多了个标签,挺占地方的。

超详细的php用户注册页面填写信息完整实例(附源码)

 八、最后验证

超详细的php用户注册页面填写信息完整实例(附源码)

当我点击提交按钮的时候,会用JS脚本做最后的验证,防止将错误信息提交到服务器端,如果有输入还没符合要求,会有一个小手定位到错误的输入框旁边,并做了来回移动的动画效果。一个会动的错误提示,我相信能更加吸引住用户的注意,然后做相应修改。这里使用了CSS3的新技术,一直想把一些已经学到了的东西应用到实际操作中,这里正好做了个尝试。这个动画提示还很粗糙,但给了我一个新的想法。唯一觉得变复杂的就是CSS代码一下子庞大了很多。

这个动画就是在控制margin-left的值,做来回移动。

.cssanimations .ico_prompt{
 -moz-animation-duration: .7s;
 -moz-animation-name: prompt_hand;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 
 -webkit-animation-duration: .7s;
 -webkit-animation-name: prompt_hand;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 
 -o-animation-duration: .7s;
 -o-animation-name: prompt_hand;
 -o-animation-iteration-count: infinite;
 -o-animation-direction: alternate;
 
 -ms-animation-duration: .7s;
 -ms-animation-name: prompt_hand;
 -ms-animation-iteration-count: infinite;
 -ms-animation-direction: alternate;
 
 animation-duration: .7s;
 animation-name: prompt_hand;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
@keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-moz-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-webkit-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-o-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
@-ms-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}

九、按钮标记

按钮里面的文字我可以写成普通的“提交”字样,也能正常工作。但是意义更明显的按钮标记能更好地帮助用户建立对点击结果的期望,让用户清楚的知道我在这里用手指点击了一下,能得到什么结果。

 超详细的php用户注册页面填写信息完整实例(附源码)

十、做防重复提交限制

最后在用户点击提交后,我会有一个转动的圆圈出现,既能暗示用户系统正在提交,请耐心等待,又能防止用户重复提交服务器。一般有经验的用户看到这种圈圈就会意识到正在提交中,但对于没经验的用户,可以做到更好。我仅仅是做了个圈圈层特效,其实这里的“马上注册”几个字可以在点击后改变成“注册提交中”等提示,让用户能更加清晰的知道现在是什么情况。

为了完成这种效果,我使用了插件spin,能够兼容各个浏览器。在ajax做提交前显示,在ajax响应后去除这个等待层。

超详细的php用户注册页面填写信息完整实例(附源码)

showAjaxLoading: function(btn) {
 var left = $(btn).offset().left;
 var top = $(btn).offset().top;
 var width = $(btn).width();
 var height = $(btn).height();
 var opts = {
 lines: 9, // The number of lines to draw
 length: 0, // The length of each line
 width: 10, // The line thickness
 radius: 15, // The radius of the inner circle
 corners: 1, // Corner roundness (0..1)
 rotate: 0, // The rotation offset
 direction: 1, // 1: clockwise, -1: counterclockwise
 color: '#000', // #rgb or #rrggbb or array of colors
 speed: 1, // Rounds per second
 trail: 81, // Afterglow percentage
 shadow: false, // Whether to render a shadow
 hwaccel: false, // Whether to use hardware acceleration
 className: 'spinner', // The CSS class to assign to the spinner
 zIndex: 2e9, // The z-index (defaults to 2000000000)
 top: '50%', // Top position relative to parent
 left: '50%' // Left position relative to parent
 };
 $('#ajax_spin').remove();
 $('body').append('<div id="ajax_spin" style="position:absolute;background:#FFF;filter:alpha(opacity=30);opacity:0.3"><div id="ajax_spin_inner" style="position:relative;height:50px;"></div></div>');
 $('#ajax_spin').css({'top':top, 'left': left, 'width': width, 'height':height});
 var target = document.getElementById('ajax_spin_inner'); 
 var spinner = new Spinner(opts).spin(target);
 }

这个注册页面是我的一个初步的思路,以后有新的体会后,将会不断的做修改。

上面的这些步骤在某些情况下可能不是最好的解决方案,所以在实际情况中最相应的修改。没有最好,只有更好。

我想做到的一个目标是,当用户进入到这个页面后,能非常轻松的完成各个输入框,非常舒服流畅的完成各个框。

附源码下载地址:php用户注册页面填写信息完整实例

以上就是本文的全部内容,希望对大家的学习有所帮助。

PHP 相关文章推荐
php下载远程文件类(支持断点续传)
Nov 14 PHP
php生成SessionID和图片校验码的思路和实现代码
Mar 10 PHP
php 动态添加记录
Mar 10 PHP
ThinkPHP CURD方法之where方法详解
Jun 18 PHP
php支持中文字符串分割的函数
May 28 PHP
php实现将上传word文件转为html的方法
Jun 03 PHP
PHP实现生成唯一会员卡号
Aug 24 PHP
Zend Framework入门教程之Zend_Mail用法示例
Dec 08 PHP
浅析PHP开发规范
Feb 05 PHP
PHP长连接实现与使用方法详解
Feb 11 PHP
PHP实现的超长文本分页显示功能示例
Jun 04 PHP
php操作redis命令及代码实例大全
Nov 19 PHP
教大家制作简单的php日历
Nov 17 #PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
Nov 16 #PHP
PHP Yii框架之表单验证规则大全
Nov 16 #PHP
Yii2.0高级框架数据库增删改查的一些操作
Nov 16 #PHP
yii添删改查实例
Nov 16 #PHP
PHP的运行机制与原理(底层)
Nov 16 #PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
Nov 15 #PHP
You might like
preg_match_all使用心得分享
2014/01/31 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jQuery使用手册之一
2007/03/24 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
如何使用python代码操作git代码
2020/02/29 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
实习鉴定评语
2014/01/19 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
保险公司演讲稿
2014/09/02 职场文书
汇报材料怎么写
2014/12/30 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
终止劳动合同通知书
2015/04/16 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python