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

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


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

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

 二、小图标icon

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

这些小图标都是从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"}

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

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

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

这是一种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});
 }

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

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

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

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

.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实现邮箱自动填充提示功能》

 

六、密码强度

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

密码强度在网上有很多插件,但是这次我自己写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判断密码强度的验证代码》

七、控制注册按钮

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

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

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

 八、最后验证

当我点击提交按钮的时候,会用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}
}

九、按钮标记

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

 

十、做防重复提交限制

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

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

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"><div id="ajax_spin_inner"></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实现简单的上传进度条 - 2015-11-20 04:11:43

Web上传文件的三种解决方案 分享给大家: 这里我要使用的是 form法 。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传。 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是 uploadprogress ,点击地
一、下载pthreads扩展 下载地址: http://windows.php.net/downloads/pecl/releases/pthreads 二、判断PHP是ts还是nts版 通过phpinfo(); 查看其中的 Thread Safety 项,这个项目就是查看是否是线程安全,如果是:enabled,一般来说应该是ts版,否则是nts版。 三、根据PHP ts\nts版选择对应pthreads的版本 本人php版本是5.4.17的所以下载php_pthreads-0.1.0-5.4-ts-vc

php+ajax实现无刷新分页 - 2015-11-19 19:11:04

本文实例讲述了php+ajax实现无刷新分页实现方法。分享给大家供大家参考。具体如下: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from table 信息总页数:ceil向上取整(总条数/每页条数) 1、分页类具体使用 ?phpclass Pagination { private $total; //数据表中总记录数 private $listRows; //每页显
刷票行为,一直以来都是个难题,无法从根本上防止。 但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。 基于 PHP,下面介绍防刷票的一些技巧: 1、使用CURL进行信息伪造 $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, " http://localhost/2.php "); curl_setopt($ch, CURLOPT_HTTPHEADER, array('X-FORWARDED-FOR:8.8.8.8', 'CLIENT-IP:8.8
从PHP生成HTML静态页面并存储到以年份和月份为名称创建的目录。 读取全部数据批量生成,全部生成后弹出提示。 可指定批次生成数量,建议不超过800,否则执行速度会有问题。 (出于众所周知的原因,涉及到数据库的数据字段名称做了改动,并且为了代码明晰去掉了参数过滤的部分) 说明:原动态地址为 moban.php?id=1 ,生成后地址为 html/200808/sell_1.html 。page.php为分页程序,本博客中有发布。 页面使用方式,将本代码保存为make.php,使用方法为浏览器访问 make
废话不多说了,直接给大家贴代码了。 ?php class test{} $a1 = null; $a2 = ""; //$a3 = $a4 = 0; $a5 = '0'; $a6 = false; $a7 = array(); //var $a8; $a9 = new test(); for ($i=1; $i =9 ; $i++) { $s = 'a'.$i; echo $i . ":"; var_dump(isset($$s)); echo 'br /'; } echo 'br /'; for ($i

WordPress网站性能优化指南 - 2015-11-19 18:11:15

1.选择一个好的主机 尽量不要使用免费主机或者共享主机(Godaddy啊、Bluehost啊等等所谓无限带宽、无限网站之类的主机) 首先,你的域名和你的主机最好在一个IDC哪儿,如果不是的话,建议你采用口碑良好的DNS服务商,让域名以最快的速度解析到主机上,这不是重点,重点是你的服务器/主机空间应该够快,怎么才能够快呢?CPU的配置、CPU的使用率、物理内存的大小、磁盘类型以及磁盘的I/O性能(包括Mysql数据库服务器所用磁盘)、Mysql响应速度以及Mysql并发数等等,都会影响到网站的快与不快,并且
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2使用中的一些基本的增删改查操作。 User::find()-all(); //返回所有用户数据; User::findOne($id); //返回 主键 id=1 的一条数据; User::find()-where(['name' = 'ttt'])-one(); //返回 ['name' = 'ttt'] 的一条数据; User::find()-where(['name' = 'ttt'])-al
本文分享了php结合ajax实现无刷新上传图片的实例代码,分享给大家,希望大家可以和小编一起学习学习,共同进步。 1.引入文件 !--图片上传begin--script type="text/javascript" src="/js/jquery.form.js"/scriptscript type="text/javascript" src="/js/uploadImg.js"/scriptlink href=#> 2.html部分 div class="upimg" input name="icon"

教大家制作简单的php日历 - 2015-11-19 15:11:54

最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示: 一、计算数据 1、new一个Calendar类 2、初始化两个下拉框中的数据,年份与月份 3、初始化要搜索的年份和月份 4、计算得出日历中每一天的数据信息,包括css、天数 ?php require_once 'calendar.php'; $util = new Calendar(); $years = array(2012, 2013, 2014, 2015, 201