注册逻辑重写

@@ -13,21 +13,21 @@
                                 {{/each}}
                             </select>
                         </li>
-                        <li class="clearfix">
+                        <li class="clearfix" data-index="0">
                             <span id="country-code" class="country-code">{{location}}</span>
                             <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
                         </li>
-                        <li class="w330 clearfix">
+                        <li class="w330 clearfix" data-index="1">
                             <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
                             <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
                             <a class="link change-captcha">换一张</a>
                         </li>
-                        <li class="clearfix">
+                        <li class="clearfix" data-index="2">
                             <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
                             <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled="">
                             <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span>
                         </li>
-                        <li class="clearfix">
+                        <li class="clearfix" data-index="3">
                             <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
                             <div class="pwd-intensity-container">
                                 <span class="pwd-intensity low">低</span>

@@ -31,4 +31,11 @@
     <script>
         seajs.use('js/passport/login');
     </script>
+{{/if}}
+
+{{!-- 注册页--}}
+{{#if registerPage}}
+<script>
+    seajs.use('js/passport/reg');
+</script>
 {{/if}}
\ No newline at end of file

+/**
+ * @desc: 计算密码复杂度(from:http://www.oschina.net/code/snippet_127301_17269)
+ * @author: xuqi(qi.xu@yoho.cn)
+ * @date: 2015/5/6
+ */
+function computeComplex(password) {
+    var complex = 0;
+    var length = password.length;
+
+    var pre = '';
+    var preType = 0;
+    for (var i = 0; i < length; i++) {
+        var cur = password.charAt(i);
+        var curType = gettype(password, i);
+
+        if (preType != curType || !isregular(cur, pre, curType)) {
+            complex += curType + getcomplex(curType, preType);
+        }
+
+        pre = cur;
+        preType = curType;
+    }
+
+    return complex;
+}
+
+function gettype(str, i) {
+    if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) {
+        return 1;
+    }
+    else if(str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) {
+        return 2;
+    }
+    else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
+        return 3;
+    }
+
+    return 4;
+}
+
+function isregular(cur, pre, type) {
+    var curCode = cur.charCodeAt(0);
+    var preCode = pre.charCodeAt(0);
+
+    if(curCode - preCode == 0){
+        return true;
+    }
+
+    if(type != 4 && (curCode - preCode == 1 || curCode - preCode == -1)){
+        return true;
+    }
+
+    return false;
+}
+
+function getcomplex(curType, preType){
+    if(preType == 0 || curType == preType){
+        return 0;
+    }else if(curType == 4 || preType == 4){
+        return 2;
+    }else{
+        return 1;
+    }
+}
+
+module.exports = computeComplex;
\ No newline at end of file

+/*
+ * @description 注册页js
+ * @time 2015/12/14
+ */
+
+var $ = require('yoho.jquery'),
+    regValidate = require('./mail-phone-regx');
+
+var $registerPage = $('.register-page'),
+    $pwdTips = $('#pwd-tips'),
+    $errTip = $('#err-tip');
+
+var $sendCaptcha = $('#send-captcha'),
+    caCount = 4,
+    validateResult = [];
+
+var $pn = $('#phone-num'),
+    $mc = $('#msg-captcha'),
+    $pwd = $('#pwd'),
+    $repwd = $('#repwd'),
+    $ca = $('#captcha');
+
+//signup验证
+var $region = $('#country-code'),
+    $regionSelect = $('#region');
+
+setTimeout(function() {
+    $pn.val('');
+    $mc.val('');
+    $pwd.val('');
+    $repwd.val('');
+    $ca.val('');
+}, 100);
+
+//验证码位数
+$ca.attr('maxlength', caCount);
+
+//密码规则提示
+$pwd.focus(function() {
+    $pwdTips.removeClass('hide');
+}).blur(function() {
+    $pwdTips.addClass('hide');
+});
+
+
+//IE8 placeholder
+//$('[placeholder]').placeholder();
+
+// 存储校验信息
+validateResult = [
+    {
+        id: 'phone-num',
+        message: '', //错误信息
+        status: false, //当前的状态
+        isNeedAjaxValidate: false //是否需要ajax校验，如果手机号正则校验通过则需要ajax校验该手机号是否注册过
+    },
+    {
+        id: 'captcha',
+        message: '',
+        status: false,
+        isNeedAjaxValidate: false //图形验证码需要发ajax确认是否正确
+    },
+    {
+        id: 'msg-captcha',
+        message: '',
+        status: false,
+        isNeedAjaxValidate: false //是否需要ajax请求验证短信验证码的正确性
+    },
+    {
+        id: 'pwd',
+        message: '',
+        status: false
+    },
+    {
+        id: 'repwd',
+        message: '',
+        status: false
+    }
+];
+
+//手机号ajax校验
+function phoneAjaxFn(callback) {
+    $.ajax({
+        url: '/passport/register/checkmobile',
+        type: 'POST',
+        data: {
+            mobile: $pn.val(),
+            area: $region.text().split('+')[1]
+        }
+    }).then(function(data) {
+        switch (data.code) {
+            case 200:
+                validateResult[0].message = '';
+                validateResult[0].status = true;
+                break;
+            case 404:
+                validateResult[0].message = '改账号已经存在';
+                validateResult[0].status = false;
+                break;
+        }
+
+        callback();
+    });
+}
+
+//图形验证码ajax校验
+function picCaptchaAjaxFn(callback) {
+    $.ajax({
+        type: 'POST',
+        url: '/passport/register/piccaptcha',
+        data: {
+            code: $ca.val(),
+            mobile: $pn.val(),
+            area: $region.text().split('+')[1]
+        }
+    }).then(function(data) {
+        switch (data.code) {
+            case 200:
+                validateResult[1].message = '';
+                validateResult[1].status = true;
+                break;
+            case 404:
+                validateResult[1].message = '图形验证码错误';
+                validateResult[1].status = false;
+                break;
+        }
+        callback();
+    });
+}
+
+//短信验证码ajax校验
+function msgCaptchaAjaxFn(callback) {
+    $.ajax({
+        type: 'POST',
+        url: '/passport/register/msgcaptcha',
+        data: {
+            code: $ca.val(),
+            mobile: $pn.val(),
+            area: $region.text().split('+')[1]
+        }
+    }).then(function(data) {
+        switch (data.code) {
+            case 200:
+                validateResult[2].message = '';
+                validateResult[2].status = true;
+                break;
+            case 404:
+                validateResult[2].message = '短信验证码错误';
+                validateResult[2].status = false;
+                break;
+        }
+
+        callback();
+    });
+}
+
+// 验证
+function validateRule($element, callback) {
+
+    var val = $.trim($element.val()),
+        regionCode;
+
+
+    //手机号校验
+    if ($element.hasClass('phone-num')) {
+
+        regionCode = $region.text();
+
+        if (val === '') {
+            validateResult[0].message = '请输入手机号码';
+            validateResult[0].status = false;
+            callback();
+
+        } else if (!regValidate.phoneRegx[regionCode].test(val)) {
+            validateResult[0].message = '手机号码格式不正确,请重新输入';
+            validateResult[0].status = false;
+            callback();
+
+        } else {
+            validateResult[0].message = '';
+            validateResult[0].status = false;
+            validateResult[0].isNeedAjaxValidate = true;
+
+            phoneAjaxFn(callback);
+        }
+
+    //图形验证码校验
+    } else if ($element.hasClass('captcha')) {
+        if (val === '') {
+            validateResult[1].message = '请输入图形验证码';
+            validateResult[1].status = false;
+            callback();
+
+        } else {
+            validateResult[1].message = '';
+            validateResult[1].isNeedAjaxValidate = true;
+            picCaptchaAjaxFn(callback);
+        }
+
+    //短信验证码校验
+    } else if ($element.hasClass('msg-captcha')) {
+
+        if (val === '') {
+            validateResult[2].message = '请输入短信验证码';
+            validateResult[2].status = false;
+            callback();
+
+        } else {
+            validateResult[2].message = '';
+            validateResult[2].status = false;
+            validateResult[2].isNeedAjaxValidate = true;
+            msgCaptchaAjaxFn(callback);
+        }
+
+    //密码校验
+    } else if ($element.hasClass('pwd')) {
+        if (val === '') {
+            validateResult[3].message = '请输入密码';
+            validateResult[3].status = false;
+
+        } else if (val.length < 6 || val.length > 20) {
+            validateResult[3].message = '密码只支持6-20位字符';
+            validateResult[3].status = false;
+
+        } else if (/\s/.test($element.val())) {
+            validateResult[3].message = '密码不能包含空格';
+            validateResult[3].status = false;
+
+        } else {
+            validateResult[3].message = '';
+            validateResult[3].status = true;
+        }
+        callback();
+
+    //二次密码校验
+    } else if ($element.hasClass('repwd')) {
+        if (val === '') {
+            validateResult[4].message = '请输入密码确认';
+            validateResult[4].status = false;
+
+        } else if ($pwd.val() !== val) {
+            validateResult[4].message = '与密码不一致,请重新输入';
+            validateResult[4].status = false;
+
+        } else {
+            validateResult[4].message = '';
+            validateResult[4].status = true;
+
+        }
+
+        callback();
+    }
+}
+
+//显示提示信息
+function showErrTip() {
+    var show = false,
+        tipPosition,
+        $container,
+        i,
+        validateResultLen = validateResult.length;
+
+    for (i = 0; i < validateResultLen; i++) {
+        if (!show && !!validateResult[i].message) {
+
+            //显示错误提示
+            $errTip.find('span').text(validateResult[i].message);
+
+            $container = $('#' + validateResult[i].id);
+
+            tipPosition = $container.offset();
+            $errTip.css({
+                top: tipPosition.top - 40,
+                left: tipPosition.left
+            }).removeClass('hide');
+
+            show = true; //停止判断
+        }
+    }
+}
+
+//显示红色边框
+function showBorder() {
+
+    var $errInput,
+        i,
+        validateResultLen = validateResult.length;
+
+    for (i = 0; i < validateResultLen; i++) {
+        if (!!validateResult[i].message) {
+
+            //显示红色边框
+            $errInput = $('#' + validateResult[i].id);
+            $errInput.addClass('error');
+
+        }
+    }
+}
+
+// 失去焦点时开始校验
+$registerPage.find('.va').focus(function() {
+
+    // 去掉错误提示,当获得焦点的时候重置message信息
+    var index = $(this).parents('li').attr('data-index');
+
+    validateResult[index].message = '';
+
+    showErrTip(); // 显示错误提示
+
+
+}).blur(function() {
+
+    validateRule($(this), function() {
+        showErrTip();
+        showBorder(); // 显示红色边框
+    });
+});
+
+$regionSelect.change(function() {
+
+    $region.text('+' + $('#region').val());
+
+    validateRule($pn, showErrTip); //验证
+});
+
+// 图形验证keyup
+$ca.keyup(function() {
+
+    // 验证码输入4位并且手机号验证通过发ajax请求
+    if ($(this).val().length === 4 && validateResult[0].status) {
+
+        picCaptchaAjaxFn(function() {
+            if (validateResult[1].status) {
+                $sendCaptcha.removeClass('disable');
+            }
+        });
+
+    } else {
+        $sendCaptcha.addClass('disable');
+    }
+});
\ No newline at end of file

@@ -38,6 +38,10 @@
                 color: #9a9a9a;
                 padding: 0;
 
+                &.error {
+                    border: 1px solid red;
+                }
+
                 &.phone-num {
                     width: 209px;
                     display: block;
@@ -51,13 +55,17 @@
 
                 &.send-captcha {
                     top: 0;
-                    background: #555;
+                    background: #ff1901;
                     position: absolute;
                     width: 100px;
                     right: 0;
                     font-size: 12px;
                     text-indent: 0;
                     letter-spacing: 0;
+
+                    &.disable {
+                        background: #555;
+                    }
                 }
 
                 &.agree-terms {
@@ -139,6 +147,29 @@
                     padding: 1px 10px;
                     text-align: center;
                 }
+
+                &.red {
+                    color: red;
+
+                    .color {
+                        background: red;
+                        color: #fff;
+                    }
+                }
+
+                &.yellow {
+                    .color {
+                        background: #ff0;
+                        color: #fff;
+                    }
+                }
+
+                &.green {
+                    .color {
+                        background: #0f0;
+                        color: #fff;
+                    }
+                }
             }
 
             //服务条款
@@ -167,5 +198,16 @@
                 white-space: nowrap;
             }
         }
+
+        .err-tip {
+            z-index: 1000;
+            position: absolute;
+            height: 30px;
+            line-height: 30px;
+            color: red;
+            background-color: #ffebeb;
+            border: 1px solid #ffbdbe;
+            padding: 0 10px;
+        }
     }
 }
\ No newline at end of file

@@ -15,27 +15,27 @@ class RegisterController extends AbstractAction
                 'actionUrl' => '/passport/register/mobileregister',
                 'region' => array(
                     array(
-                        'id' => 12,
+                        'id' => 86,
                         'name' => '中国',
                         'selected' => true
                     ),
                     array(
-                        'id' => 13,
+                        'id' => 853,
                         'name' => '中国澳门',
                         'selected' => false
                     ),
                     array(
-                        'id' => 14,
+                        'id' => 886,
                         'name' => '中国台湾',
                         'selected' => false
                     ),
                     array(
-                        'id' => 15,
+                        'id' => 65,
                         'name' => '中国香港',
                         'selected' => false
                     ),
                     array(
-                        'id' => 16,
+                        'id' => 60,
                         'name' => '马来西亚',
                         'selected' => false
                     ),
@@ -51,4 +51,34 @@ class RegisterController extends AbstractAction
         );
         $this->_view->display('index', $data);
     }
+
+    public function checkmobileAction()
+    {
+        $data = array(
+            'code' => 404
+        );
+
+        $this -> echoJson($data);
+
+    }
+
+    public function piccaptchaAction()
+    {
+        $data = array(
+            'code' => 404
+        );
+
+        $this -> echoJson($data);
+
+    }
+
+    public function msgcaptchaAction()
+    {
+        $data = array(
+            'code' => 404
+        );
+
+        $this -> echoJson($data);
+
+    }
 }
\ No newline at end of file