标签：style blog http color 使用 os strong io
注册页面是大多数网站必备的页面，所以很有必要对自己的注册页面做些精心的设计。我这次做的注册页面如下：
在用户看到这个输入框的时候，就能非常清晰的明白这个输入框是做啥用的，最大限度的降低他们产生疑惑的可能性
以前使用小图标都是用图片，用图片的话，很多时候那些对齐、宽度高度搞起来特麻烦，这次我将图标做成字体，操作字体可比操作图片容易很多。可以到国外的一个网站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"}
通过这个设置，能够让用户知道自己还能输入多少个字符，能很好的提升友好度。并且在输入到一些字符后，将出现变红色，警示用户马上要超过额定字数了。
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"}
将@163.com等这种邮箱后缀自动显示，能够减少用户的输入，既能方便他们打字也能减少他们的错误。从网上查到了相关的JS脚本代码，自己再做了一点小修改，集成到我的代码中。
密码强度在网上有很多插件，但是这次我自己写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}
这里有个单选框，当我选中单选框的时候，可以点击注册按钮，当我不选中的时候，将不能点击注册按钮。这样做能够提醒用户这里需要阅读下服务条款。点击服务条款弹出一个层，里面是协议内容，我这里就只是意思意思了一下。
当我点击提交按钮的时候，会用JSj脚本做最后的验证，防止将错误信息提交到服务器端，如果有输入还没符合要求，会有一个小手指向那个输入框的旁边，并做了CSS3的来回移动的动画效果。一个在动的错误提示，我相信能更加吸引用户的注意，然后做修改。这个动画就是在控制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" 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); }
这个注册页面是我的一个初步的思路，以后有新的体会后，将会不断的做修改。
我想做到的一个目标是，当用户进入到这个页面后，能非常轻松的完成各个输入框，非常舒服流畅的完成各个框。
demo可以到这里下载http://download.csdn.net/download/loneleaf1/7684137
参考资料：
http://www.cnblogs.com/shenliang123/archive/2013/08/19/3267884.html jquery 实现邮箱输入自动提示功能
http://www.cnblogs.com/tianyaxiang/archive/2012/01/31/2333270.html jquery实现密码强度验证
http://zc.qq.com/chs/index.html QQ注册
http://icomoon.io 在线制作icon
https://github.com/aui/artDialog 网页对话框组件
标签：style blog http color 使用 os strong io
原文地址：http://www.cnblogs.com/strick/p/3871374.html
