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

<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"} 

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}

.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}}

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); }