fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit bc285d652d6245ccbe25a7c029c5cd532053318d 1 parent 2a86be73

注册逻辑重写

Inline Side-by-side
Showing 6 changed files with 496 additions and 10 deletions
@@ -13,21 +13,21 @@ @@ -13,21 +13,21 @@
13 {{/each}} 13 {{/each}}
14 </select> 14 </select>
15 </li> 15 </li>
16 - <li class="clearfix"> 16 + <li class="clearfix" data-index="0">
17 <span id="country-code" class="country-code">{{location}}</span> 17 <span id="country-code" class="country-code">{{location}}</span>
18 <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off"> 18 <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
19 </li> 19 </li>
20 - <li class="w330 clearfix"> 20 + <li class="w330 clearfix" data-index="1">
21 <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4"> 21 <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
22 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt=""> 22 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
23 <a class="link change-captcha">换一张</a> 23 <a class="link change-captcha">换一张</a>
24 </li> 24 </li>
25 - <li class="clearfix"> 25 + <li class="clearfix" data-index="2">
26 <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4"> 26 <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
27 <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled=""> 27 <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled="">
28 <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span> 28 <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span>
29 </li> 29 </li>
30 - <li class="clearfix"> 30 + <li class="clearfix" data-index="3">
31 <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password"> 31 <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
32 <div class="pwd-intensity-container"> 32 <div class="pwd-intensity-container">
33 <span class="pwd-intensity low">低</span> 33 <span class="pwd-intensity low">低</span>
@@ -31,4 +31,11 @@ @@ -31,4 +31,11 @@
31 <script> 31 <script>
32 seajs.use('js/passport/login'); 32 seajs.use('js/passport/login');
33 </script> 33 </script>
  34 +{{/if}}
  35 +
  36 +{{!-- 注册页--}}
  37 +{{#if registerPage}}
  38 +<script>
  39 + seajs.use('js/passport/reg');
  40 +</script>
34 {{/if}} 41 {{/if}}
  1 +/**
  2 + * @desc: 计算密码复杂度(from:http://www.oschina.net/code/snippet_127301_17269)
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/5/6
  5 + */
  6 +function computeComplex(password) {
  7 + var complex = 0;
  8 + var length = password.length;
  9 +
  10 + var pre = '';
  11 + var preType = 0;
  12 + for (var i = 0; i < length; i++) {
  13 + var cur = password.charAt(i);
  14 + var curType = gettype(password, i);
  15 +
  16 + if (preType != curType || !isregular(cur, pre, curType)) {
  17 + complex += curType + getcomplex(curType, preType);
  18 + }
  19 +
  20 + pre = cur;
  21 + preType = curType;
  22 + }
  23 +
  24 + return complex;
  25 +}
  26 +
  27 +function gettype(str, i) {
  28 + if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) {
  29 + return 1;
  30 + }
  31 + else if(str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) {
  32 + return 2;
  33 + }
  34 + else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
  35 + return 3;
  36 + }
  37 +
  38 + return 4;
  39 +}
  40 +
  41 +function isregular(cur, pre, type) {
  42 + var curCode = cur.charCodeAt(0);
  43 + var preCode = pre.charCodeAt(0);
  44 +
  45 + if(curCode - preCode == 0){
  46 + return true;
  47 + }
  48 +
  49 + if(type != 4 && (curCode - preCode == 1 || curCode - preCode == -1)){
  50 + return true;
  51 + }
  52 +
  53 + return false;
  54 +}
  55 +
  56 +function getcomplex(curType, preType){
  57 + if(preType == 0 || curType == preType){
  58 + return 0;
  59 + }else if(curType == 4 || preType == 4){
  60 + return 2;
  61 + }else{
  62 + return 1;
  63 + }
  64 +}
  65 +
  66 +module.exports = computeComplex;
  1 +/*
  2 + * @description 注册页js
  3 + * @time 2015/12/14
  4 + */
  5 +
  6 +var $ = require('yoho.jquery'),
  7 + regValidate = require('./mail-phone-regx');
  8 +
  9 +var $registerPage = $('.register-page'),
  10 + $pwdTips = $('#pwd-tips'),
  11 + $errTip = $('#err-tip');
  12 +
  13 +var $sendCaptcha = $('#send-captcha'),
  14 + caCount = 4,
  15 + validateResult = [];
  16 +
  17 +var $pn = $('#phone-num'),
  18 + $mc = $('#msg-captcha'),
  19 + $pwd = $('#pwd'),
  20 + $repwd = $('#repwd'),
  21 + $ca = $('#captcha');
  22 +
  23 +//signup验证
  24 +var $region = $('#country-code'),
  25 + $regionSelect = $('#region');
  26 +
  27 +setTimeout(function() {
  28 + $pn.val('');
  29 + $mc.val('');
  30 + $pwd.val('');
  31 + $repwd.val('');
  32 + $ca.val('');
  33 +}, 100);
  34 +
  35 +//验证码位数
  36 +$ca.attr('maxlength', caCount);
  37 +
  38 +//密码规则提示
  39 +$pwd.focus(function() {
  40 + $pwdTips.removeClass('hide');
  41 +}).blur(function() {
  42 + $pwdTips.addClass('hide');
  43 +});
  44 +
  45 +
  46 +//IE8 placeholder
  47 +//$('[placeholder]').placeholder();
  48 +
  49 +// 存储校验信息
  50 +validateResult = [
  51 + {
  52 + id: 'phone-num',
  53 + message: '', //错误信息
  54 + status: false, //当前的状态
  55 + isNeedAjaxValidate: false //是否需要ajax校验，如果手机号正则校验通过则需要ajax校验该手机号是否注册过
  56 + },
  57 + {
  58 + id: 'captcha',
  59 + message: '',
  60 + status: false,
  61 + isNeedAjaxValidate: false //图形验证码需要发ajax确认是否正确
  62 + },
  63 + {
  64 + id: 'msg-captcha',
  65 + message: '',
  66 + status: false,
  67 + isNeedAjaxValidate: false //是否需要ajax请求验证短信验证码的正确性
  68 + },
  69 + {
  70 + id: 'pwd',
  71 + message: '',
  72 + status: false
  73 + },
  74 + {
  75 + id: 'repwd',
  76 + message: '',
  77 + status: false
  78 + }
  79 +];
  80 +
  81 +//手机号ajax校验
  82 +function phoneAjaxFn(callback) {
  83 + $.ajax({
  84 + url: '/passport/register/checkmobile',
  85 + type: 'POST',
  86 + data: {
  87 + mobile: $pn.val(),
  88 + area: $region.text().split('+')[1]
  89 + }
  90 + }).then(function(data) {
  91 + switch (data.code) {
  92 + case 200:
  93 + validateResult[0].message = '';
  94 + validateResult[0].status = true;
  95 + break;
  96 + case 404:
  97 + validateResult[0].message = '改账号已经存在';
  98 + validateResult[0].status = false;
  99 + break;
  100 + }
  101 +
  102 + callback();
  103 + });
  104 +}
  105 +
  106 +//图形验证码ajax校验
  107 +function picCaptchaAjaxFn(callback) {
  108 + $.ajax({
  109 + type: 'POST',
  110 + url: '/passport/register/piccaptcha',
  111 + data: {
  112 + code: $ca.val(),
  113 + mobile: $pn.val(),
  114 + area: $region.text().split('+')[1]
  115 + }
  116 + }).then(function(data) {
  117 + switch (data.code) {
  118 + case 200:
  119 + validateResult[1].message = '';
  120 + validateResult[1].status = true;
  121 + break;
  122 + case 404:
  123 + validateResult[1].message = '图形验证码错误';
  124 + validateResult[1].status = false;
  125 + break;
  126 + }
  127 + callback();
  128 + });
  129 +}
  130 +
  131 +//短信验证码ajax校验
  132 +function msgCaptchaAjaxFn(callback) {
  133 + $.ajax({
  134 + type: 'POST',
  135 + url: '/passport/register/msgcaptcha',
  136 + data: {
  137 + code: $ca.val(),
  138 + mobile: $pn.val(),
  139 + area: $region.text().split('+')[1]
  140 + }
  141 + }).then(function(data) {
  142 + switch (data.code) {
  143 + case 200:
  144 + validateResult[2].message = '';
  145 + validateResult[2].status = true;
  146 + break;
  147 + case 404:
  148 + validateResult[2].message = '短信验证码错误';
  149 + validateResult[2].status = false;
  150 + break;
  151 + }
  152 +
  153 + callback();
  154 + });
  155 +}
  156 +
  157 +// 验证
  158 +function validateRule($element, callback) {
  159 +
  160 + var val = $.trim($element.val()),
  161 + regionCode;
  162 +
  163 +
  164 + //手机号校验
  165 + if ($element.hasClass('phone-num')) {
  166 +
  167 + regionCode = $region.text();
  168 +
  169 + if (val === '') {
  170 + validateResult[0].message = '请输入手机号码';
  171 + validateResult[0].status = false;
  172 + callback();
  173 +
  174 + } else if (!regValidate.phoneRegx[regionCode].test(val)) {
  175 + validateResult[0].message = '手机号码格式不正确,请重新输入';
  176 + validateResult[0].status = false;
  177 + callback();
  178 +
  179 + } else {
  180 + validateResult[0].message = '';
  181 + validateResult[0].status = false;
  182 + validateResult[0].isNeedAjaxValidate = true;
  183 +
  184 + phoneAjaxFn(callback);
  185 + }
  186 +
  187 + //图形验证码校验
  188 + } else if ($element.hasClass('captcha')) {
  189 + if (val === '') {
  190 + validateResult[1].message = '请输入图形验证码';
  191 + validateResult[1].status = false;
  192 + callback();
  193 +
  194 + } else {
  195 + validateResult[1].message = '';
  196 + validateResult[1].isNeedAjaxValidate = true;
  197 + picCaptchaAjaxFn(callback);
  198 + }
  199 +
  200 + //短信验证码校验
  201 + } else if ($element.hasClass('msg-captcha')) {
  202 +
  203 + if (val === '') {
  204 + validateResult[2].message = '请输入短信验证码';
  205 + validateResult[2].status = false;
  206 + callback();
  207 +
  208 + } else {
  209 + validateResult[2].message = '';
  210 + validateResult[2].status = false;
  211 + validateResult[2].isNeedAjaxValidate = true;
  212 + msgCaptchaAjaxFn(callback);
  213 + }
  214 +
  215 + //密码校验
  216 + } else if ($element.hasClass('pwd')) {
  217 + if (val === '') {
  218 + validateResult[3].message = '请输入密码';
  219 + validateResult[3].status = false;
  220 +
  221 + } else if (val.length < 6 || val.length > 20) {
  222 + validateResult[3].message = '密码只支持6-20位字符';
  223 + validateResult[3].status = false;
  224 +
  225 + } else if (/\s/.test($element.val())) {
  226 + validateResult[3].message = '密码不能包含空格';
  227 + validateResult[3].status = false;
  228 +
  229 + } else {
  230 + validateResult[3].message = '';
  231 + validateResult[3].status = true;
  232 + }
  233 + callback();
  234 +
  235 + //二次密码校验
  236 + } else if ($element.hasClass('repwd')) {
  237 + if (val === '') {
  238 + validateResult[4].message = '请输入密码确认';
  239 + validateResult[4].status = false;
  240 +
  241 + } else if ($pwd.val() !== val) {
  242 + validateResult[4].message = '与密码不一致,请重新输入';
  243 + validateResult[4].status = false;
  244 +
  245 + } else {
  246 + validateResult[4].message = '';
  247 + validateResult[4].status = true;
  248 +
  249 + }
  250 +
  251 + callback();
  252 + }
  253 +}
  254 +
  255 +//显示提示信息
  256 +function showErrTip() {
  257 + var show = false,
  258 + tipPosition,
  259 + $container,
  260 + i,
  261 + validateResultLen = validateResult.length;
  262 +
  263 + for (i = 0; i < validateResultLen; i++) {
  264 + if (!show && !!validateResult[i].message) {
  265 +
  266 + //显示错误提示
  267 + $errTip.find('span').text(validateResult[i].message);
  268 +
  269 + $container = $('#' + validateResult[i].id);
  270 +
  271 + tipPosition = $container.offset();
  272 + $errTip.css({
  273 + top: tipPosition.top - 40,
  274 + left: tipPosition.left
  275 + }).removeClass('hide');
  276 +
  277 + show = true; //停止判断
  278 + }
  279 + }
  280 +}
  281 +
  282 +//显示红色边框
  283 +function showBorder() {
  284 +
  285 + var $errInput,
  286 + i,
  287 + validateResultLen = validateResult.length;
  288 +
  289 + for (i = 0; i < validateResultLen; i++) {
  290 + if (!!validateResult[i].message) {
  291 +
  292 + //显示红色边框
  293 + $errInput = $('#' + validateResult[i].id);
  294 + $errInput.addClass('error');
  295 +
  296 + }
  297 + }
  298 +}
  299 +
  300 +// 失去焦点时开始校验
  301 +$registerPage.find('.va').focus(function() {
  302 +
  303 + // 去掉错误提示,当获得焦点的时候重置message信息
  304 + var index = $(this).parents('li').attr('data-index');
  305 +
  306 + validateResult[index].message = '';
  307 +
  308 + showErrTip(); // 显示错误提示
  309 +
  310 +
  311 +}).blur(function() {
  312 +
  313 + validateRule($(this), function() {
  314 + showErrTip();
  315 + showBorder(); // 显示红色边框
  316 + });
  317 +});
  318 +
  319 +$regionSelect.change(function() {
  320 +
  321 + $region.text('+' + $('#region').val());
  322 +
  323 + validateRule($pn, showErrTip); //验证
  324 +});
  325 +
  326 +// 图形验证keyup
  327 +$ca.keyup(function() {
  328 +
  329 + // 验证码输入4位并且手机号验证通过发ajax请求
  330 + if ($(this).val().length === 4 && validateResult[0].status) {
  331 +
  332 + picCaptchaAjaxFn(function() {
  333 + if (validateResult[1].status) {
  334 + $sendCaptcha.removeClass('disable');
  335 + }
  336 + });
  337 +
  338 + } else {
  339 + $sendCaptcha.addClass('disable');
  340 + }
  341 +});
@@ -38,6 +38,10 @@ @@ -38,6 +38,10 @@
38 color: #9a9a9a; 38 color: #9a9a9a;
39 padding: 0; 39 padding: 0;
40 40
  41 + &.error {
  42 + border: 1px solid red;
  43 + }
  44 +
41 &.phone-num { 45 &.phone-num {
42 width: 209px; 46 width: 209px;
43 display: block; 47 display: block;
@@ -51,13 +55,17 @@ @@ -51,13 +55,17 @@
51 55
52 &.send-captcha { 56 &.send-captcha {
53 top: 0; 57 top: 0;
54 - background: #555; 58 + background: #ff1901;
55 position: absolute; 59 position: absolute;
56 width: 100px; 60 width: 100px;
57 right: 0; 61 right: 0;
58 font-size: 12px; 62 font-size: 12px;
59 text-indent: 0; 63 text-indent: 0;
60 letter-spacing: 0; 64 letter-spacing: 0;
  65 +
  66 + &.disable {
  67 + background: #555;
  68 + }
61 } 69 }
62 70
63 &.agree-terms { 71 &.agree-terms {
@@ -139,6 +147,29 @@ @@ -139,6 +147,29 @@
139 padding: 1px 10px; 147 padding: 1px 10px;
140 text-align: center; 148 text-align: center;
141 } 149 }
  150 +
  151 + &.red {
  152 + color: red;
  153 +
  154 + .color {
  155 + background: red;
  156 + color: #fff;
  157 + }
  158 + }
  159 +
  160 + &.yellow {
  161 + .color {
  162 + background: #ff0;
  163 + color: #fff;
  164 + }
  165 + }
  166 +
  167 + &.green {
  168 + .color {
  169 + background: #0f0;
  170 + color: #fff;
  171 + }
  172 + }
142 } 173 }
143 174
144 //服务条款 175 //服务条款
@@ -167,5 +198,16 @@ @@ -167,5 +198,16 @@
167 white-space: nowrap; 198 white-space: nowrap;
168 } 199 }
169 } 200 }
  201 +
  202 + .err-tip {
  203 + z-index: 1000;
  204 + position: absolute;
  205 + height: 30px;
  206 + line-height: 30px;
  207 + color: red;
  208 + background-color: #ffebeb;
  209 + border: 1px solid #ffbdbe;
  210 + padding: 0 10px;
  211 + }
170 } 212 }
171 } 213 }
@@ -15,27 +15,27 @@ class RegisterController extends AbstractAction @@ -15,27 +15,27 @@ class RegisterController extends AbstractAction
15 'actionUrl' => '/passport/register/mobileregister', 15 'actionUrl' => '/passport/register/mobileregister',
16 'region' => array( 16 'region' => array(
17 array( 17 array(
18 - 'id' => 12, 18 + 'id' => 86,
19 'name' => '中国', 19 'name' => '中国',
20 'selected' => true 20 'selected' => true
21 ), 21 ),
22 array( 22 array(
23 - 'id' => 13, 23 + 'id' => 853,
24 'name' => '中国澳门', 24 'name' => '中国澳门',
25 'selected' => false 25 'selected' => false
26 ), 26 ),
27 array( 27 array(
28 - 'id' => 14, 28 + 'id' => 886,
29 'name' => '中国台湾', 29 'name' => '中国台湾',
30 'selected' => false 30 'selected' => false
31 ), 31 ),
32 array( 32 array(
33 - 'id' => 15, 33 + 'id' => 65,
34 'name' => '中国香港', 34 'name' => '中国香港',
35 'selected' => false 35 'selected' => false
36 ), 36 ),
37 array( 37 array(
38 - 'id' => 16, 38 + 'id' => 60,
39 'name' => '马来西亚', 39 'name' => '马来西亚',
40 'selected' => false 40 'selected' => false
41 ), 41 ),
@@ -51,4 +51,34 @@ class RegisterController extends AbstractAction @@ -51,4 +51,34 @@ class RegisterController extends AbstractAction
51 ); 51 );
52 $this->_view->display('index', $data); 52 $this->_view->display('index', $data);
53 } 53 }
  54 +
  55 + public function checkmobileAction()
  56 + {
  57 + $data = array(
  58 + 'code' => 404
  59 + );
  60 +
  61 + $this -> echoJson($data);
  62 +
  63 + }
  64 +
  65 + public function piccaptchaAction()
  66 + {
  67 + $data = array(
  68 + 'code' => 404
  69 + );
  70 +
  71 + $this -> echoJson($data);
  72 +
  73 + }
  74 +
  75 + public function msgcaptchaAction()
  76 + {
  77 + $data = array(
  78 + 'code' => 404
  79 + );
  80 +
  81 + $this -> echoJson($data);
  82 +
  83 + }
54 } 84 }