handle merge

@@ -90,23 +90,18 @@ const sendCodePage = (req, res, next) => {
 const saveInSession = (req, res) => {
     switch (req.inputInfo.type) {
         case 'email':
-            {
-                req.session.email = req.inputInfo.phone;
-                res.redirect(helpers.urlFormat('/passport/back/sendEmail'));
-                break;
-            }
+            req.session.email = req.inputInfo.phone;
+            res.redirect(helpers.urlFormat('/passport/back/sendEmail'));
+            break;
         case 'mobile':
-            {
-                req.session.mobile = req.inputInfo.phone;
-                req.session.area = req.inputInfo.area;
-                req.session.verifyCode = req.session.captcha;
-                res.redirect(helpers.urlFormat('/passport/back/verification'));
-                break;
-            }
+            req.session.mobile = req.inputInfo.phone;
+            req.session.area = req.inputInfo.area;
+            req.session.verifyCode = req.session.captcha;
+            res.redirect(helpers.urlFormat('/passport/back/verification'));
+            break;
         default:
-            {
-                res.redirect(helpers.urlFormat('/passport/back/index'));
-            }
+            res.redirect(helpers.urlFormat('/passport/back/index'));
+            break;
     }
 };
 
@@ -123,10 +118,9 @@ const sendBackMobileAPI = (req, res, next) => {
 
 const validateMobileAPI = (req, res, next) => {
     let mobile = req.body.mobile || '';
-    let area = req.body.area || '86';
     const ERR = {code: 400, message: '验证失败'};
 
-    if (!passportHelper.validator.isAreaMobile(passportHelper.makeAreaMobile(area, mobile))) {
+    if (!passportHelper.validator.verifyMobile(mobile)) {
         return res.json(ERR);
     }
 
@@ -149,24 +143,17 @@ const validateEmailInSession = (req, res, next) => {
     next();
 };
 
-const sendEmailPage = (req, res, next) => {
-    passportHelper.getLeftBannerAsync()
-        .then(result => {
-            res.display('back/send-email', Object.assign({
-                module: 'passport',
-                page: 'back-send-email-ok',
-                title: '邮件发送成功',
-                defaultHeader: false
-            }, {
-                sendEmail: {
-                    coverHref: result.url,
-                    coverImg: result.img,
-                    email: req.body.emailUrl
-                }
-            }));
-        })
-        .catch(next);
-
+const sendEmailPage = (req, res) => {
+    res.display('back/send-email', Object.assign({
+        module: 'passport',
+        page: 'back-send-email-ok',
+        title: '邮件发送成功',
+        defaultHeader: false
+    }, {
+        sendEmail: {
+            email: req.body.emailUrl
+        }
+    }));
 };
 
 const validateCodeByEmailPage = (req, res, next) => {
@@ -229,22 +216,13 @@ const validateSuccessStatusPage = (req, res, next) => {
     next();
 };
 
-const resetPwdSuccessPage = (req, res, next) => {
-    passportHelper.getLeftBannerAsync()
-        .then(result => {
-            res.display('back/reset-success', Object.assign({
-                module: 'passport',
-                page: 'back-index',
-                title: '重置密码成功',
-                defaultHeader: false
-            }, {
-                resetSuccess: {
-                    coverHref: result.url,
-                    coverImg: result.img
-                }
-            }));
-        })
-        .catch(next);
+const resetPwdSuccessPage = (req, res) => {
+    res.display('back/reset-success', Object.assign({
+        module: 'passport',
+        page: 'back-reset-success',
+        title: '重置密码成功',
+        defaultHeader: false
+    }));
 };
 
 const verifyCodeByMobileAPI = (req, res) => {

@@ -28,7 +28,7 @@ const validateEmailOrMobileAsync = (userInput, areaCode) => {
             result.phone = userInput;
 
             resolve(result);
-        } else if (passportHelper.validator.isAreaMobile(passportHelper.makeAreaMobile(areaCode, userInput))) {
+        } else if (passportHelper.validator.verifyMobile(userInput)) {
             result.type = 'mobile';
             result.area = areaCode;
             result.phone = userInput;

@@ -3,44 +3,14 @@
  */
 'use strict';
 
-const Promise = require('bluebird');
-const co = Promise.coroutine;
 const _ = require('lodash');
 
 const helpers = global.yoho.helpers;
-const indexService = require('./index-service');
 const UserService = require('./user-service');
 
 const DEFAULT_HEAD_IMG_ICO = 'http://img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif?imageView/2/w/100/h/100';
 
 /**
- * 获得图片
- */
-const getLeftBannerAsync = (resourceCode) => {
-    const DEFAULT_VALUE = {
-        img: 'http://img12.static.yhbimg.com/' +
-        'yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
-        url: ''
-    };
-
-    return co(function * () {
-        let resource = yield indexService.getResourceAsync(resourceCode);
-
-        if (_.isEmpty(resource)) {
-            return DEFAULT_VALUE;
-        }
-
-        let value = {};
-
-        // 有点问题 // passport model 58
-        value.img = helpers.image(resource[0].data[0].src, 252, 190);
-        value.url = resource[0].data[0].url;
-
-        return value;
-    })();
-};
-
-/**
  * 国家数据
  */
 const getCountry = () => {
@@ -109,92 +79,6 @@ const getCountry = () => {
 };
 
 /**
- * 各国手机号规则
- */
-const _areaMobileVerify = (phone, area) => {
-    area = area || '86';
-    phone = phone.trim();
-
-    let verify = {
-        86: {
-            name: '中国',
-            match: /^1[3|4|5|8|7][0-9]{9}$/.test(phone)
-        },
-        852: {
-            name: '中国香港',
-            match: /^[9|6|5][0-9]{7}$/.test(phone)
-        },
-        853: {
-            name: '中国澳门',
-            match: /^[0-9]{8}$/.test(phone)
-        },
-        886: {
-            name: '中国台湾',
-            match: /^[0-9]{10}$/.test(phone)
-        },
-        65: {
-            name: '新加坡',
-            match: /^[9|8][0-9]{7}$/.test(phone)
-        },
-        60: {
-            name: '马来西亚',
-            match: /^1[1|2|3|4|6|7|9][0-9]{8}$/.test(phone)
-        },
-        1: {
-            name: '加拿大&美国',
-            match: /^[0-9]{10}$/.test(phone)
-        },
-        82: {
-            name: '韩国',
-            match: /^01[0-9]{9}$/.test(phone)
-        },
-        44: {
-            name: '英国',
-            match: /^7[7|8|9][0-9]{8}$/.test(phone)
-        },
-        81: {
-            name: '日本',
-            match: /^0[9|8|7][0-9]{9}$/.test(phone)
-        },
-        61: {
-            name: '澳大利亚',
-            match: /^[0-9]{11}$/.test(phone)
-        }
-    };
-
-    if (verify[area]) {
-        return verify[area].match;
-    } else {
-        return false;
-    }
-};
-
-/**
- * 验证国际手机号是否合法
- */
-const isAreaMobile = areaMobile => {
-    if (!areaMobile) {
-        return false;
-    }
-
-    let mobile = {
-        area: '86',
-        phone: ''
-    };
-
-    let splitMobile = areaMobile.split('-');
-
-    if (splitMobile.length === 2) {
-        mobile.area = splitMobile[0];
-        mobile.phone = splitMobile[1];
-    } else {
-        mobile.phone = splitMobile[0];
-    }
-
-    return _areaMobileVerify(mobile.phone, mobile.area);
-};
-
-/**
  * 验证邮箱是否合法
  */
 const verifyEmail = email => {
@@ -215,19 +99,9 @@ const verifyMobile = phone => {
         return false;
     }
 
-    return /^1[3|4|5|8|7][0-9]{9}$/.test(phone);
+    return /^[0-9]+$/.test(phone);
 };
 
-/**
- * 生成带区号的手机号码
- */
-const makeAreaMobile = (area, mobile) => {
-    if (!area || area === '86') {
-        return mobile;
-    }
-
-    return `${area}-${mobile}`;
-};
 
 /**
  * 密码是否合法
@@ -265,12 +139,9 @@ const getUserInfo = (area, mobile) => {
 module.exports = {
     validator: {
         verifyMobile,
-        isAreaMobile,
         verifyEmail,
         isPassword
     },
-    makeAreaMobile,
     getCountry,
-    getLeftBannerAsync,
     getUserInfo
 };

@@ -2,15 +2,8 @@
  * 注册 model
  */
 'use strict';
-const passportHelper = require('./passport-helper');
-
-const REGISTER_LEFT_BANNER_CODE = 'c479ec90120cae7f96e52922b4917064'; // 注册左边的banner
 const api = global.yoho.API;
 
-let getRegData = () => {
-    return passportHelper.getLeftBannerAsync(REGISTER_LEFT_BANNER_CODE);
-};
-
 let sendCodeToMobile = (area, mobile) => {
     let params = {
         method: 'app.register.sendRegCodeToMobile',
@@ -48,7 +41,6 @@ let regMobile = (area, mobile, password, shoppingKey)=> {
 };
 
 module.exports = {
-    getRegData,
     sendCodeToMobile,
     validMobileCode,
     regMobile

@@ -52,12 +52,27 @@
                         <span id="country-code" class="country-code">{{location}}</span>
                         <input value="" id="phoneNum" class="input va phone-num" type="text" name="phoneNum"
                                placeholder="Phone Number" autocomplete="off">
+
+                        <div class="tips hide">
+                            <div class="triangle"></div>
+                            <div class="rectangle"></div>
+                        </div>
+
                     </div>
                 </li>
 
                 <li class="clearfix">
-                    <input id="verifyCode" class="input va captcha" type="text" name="verifyCode" placeholder="图形验证码"
-                           autocomplete="off" maxlength="4">
+
+                    <div class="sms-captcha-wrapper">
+                        <input id="verifyCode" class="input va captcha" type="text" name="verifyCode"
+                               placeholder="图形验证码"
+                               autocomplete="off" maxlength="4">
+
+                        <div class="tips hide">
+                            <div class="triangle"></div>
+                            <div class="rectangle"></div>
+                        </div>
+                    </div>
 
                     <div class="left captcha-component">
                         <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
@@ -69,16 +84,11 @@
                 <li class="clearfix">
                     <input name="refer" id="refer" type="hidden" value="http%3A%2F%2Fwww.yohoblk.com%2F">
                     <div class="center">
-                        <a id="find-btn" class="find-btn disable" >下一步</a>
+                        <a id="find-btn" class="find-btn disable">下一步</a>
                     </div>
                 </li>
             </form>
         </ul>
 
-        <div class="tips hide">
-            <div class="triangle"></div>
-            <div class="rectangle"></div>
-        </div>
-
     {{/ back}}
 </div>

@@ -46,10 +46,23 @@
                 <li class="input-container-li po-re">
                     <input id="pwd" class="input va pwd" type="password" name="pwd" placeholder="新的登录密码"
                            maxlength="20">
+
+                    <div class="tips hide">
+                        <div class="triangle"></div>
+                        <div class="rectangle"></div>
+                    </div>
+
                 </li>
                 <li class="clearfix">
                     <input id="re-input" class="input va re-input repwd" type="password" name="re-input"
                            placeholder="确认登录密码" maxlength="20">
+
+
+                    <div class="tips hide">
+                        <div class="triangle"></div>
+                        <div class="rectangle"></div>
+                    </div>
+
                 </li>
                 <li class="clearfix blank">
                     <input type="hidden" name="code" value="{{code}}">

@@ -51,8 +51,15 @@
 
             <form id="verification-form" class="verification-form" method="POST" action="/passport/back/backmobile">
                 <li>
-                    <input id="captcha" class="input va captcha left" type="text" name="code" maxlength="4"
-                           placeholder="请输入短信验证码">
+                    <div class="sms-captcha-wrapper">
+                        <input id="captcha" class="input va captcha left" type="text" name="code" maxlength="4"
+                               placeholder="请输入短信验证码">
+
+                        <div class="tips hide">
+                            <div class="triangle"></div>
+                            <div class="rectangle"></div>
+                        </div>
+                    </div>
                     <a id="send-captcha" class="btn send-captcha left">获取短信验证码</a>
 
                 </li>
@@ -69,10 +76,7 @@
 
         </ul>
 
-        <div class="tips hide">
-            <div class="triangle"></div>
-            <div class="rectangle"></div>
-        </div>
+
     {{/ verification}}
 
 </div>

@@ -17,19 +17,39 @@
                     <input id="account" class="account input phone-num va" name="account" value="{{bindMobile}}"
                            type="text"
                            placeholder="Phone Number" autocomplete="off">
+
+                    <div class="tips phone-num-tips hide">
+                        <div class="triangle"></div>
+                        <div class="rectangle"></div>
+                    </div>
+
                 </div>
             </li>
 
             <li class="clearfix">
-                <input id="password" class="input password va needTip" name="password" type="password"
-                       placeholder="Password"
-                       autocomplete="off" maxlength="20">
+                <div class="pwd-wrapper">
+                    <input id="password" class="input password va needTip" name="password" type="password"
+                           placeholder="Password"
+                           autocomplete="off" maxlength="20">
+
+                    <div class="tips pwd-tips hide">
+                        <div class="triangle"></div>
+                        <div class="rectangle"></div>
+                    </div>
+                </div>
+
             </li>
 
             <li class="clearfix captcha-wrap hide">
+                <div class="img-captcha-wrapper">
+                    <input id="captcha" class="input va captcha needTip" type="text" name="captcha" placeholder="图形验证码"
+                           autocomplete="off" maxlength="4">
 
-                <input id="captcha" class="input va captcha needTip" type="text" name="captcha" placeholder="图形验证码"
-                       autocomplete="off" maxlength="4">
+                    <div class="tips img-captcha-tips hide">
+                        <div class="triangle"></div>
+                        <div class="rectangle"></div>
+                    </div>
+                </div>
 
                 <div class="left captcha-component">
                     <img id="captcha-img" class="left captcha-img" alt="">
@@ -82,12 +102,6 @@
                     <a class="blue" href="{{fastReg}}">快速注册</a>
                     </span>
             </li>
-
-            <div class="tips hide">
-                <div class="triangle"></div>
-                <div class="rectangle"></div>
-            </div>
-
         </ul>
         <input id="country-code-hide" name="countryCode" type="hidden" value="{{countryCode}}">
     {{/ passport}}

@@ -5,7 +5,7 @@
                 JOIN YOHO!BLK
             </div>
         </li>
-        <li class="clearfix relative" data-index="0">
+        <li class="clearfix" data-index="0">
             <select id="region" class="region" name="region">
                 {{#each region}}
                     <option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
@@ -15,13 +15,27 @@
                 <span id="country-code" class="country-code">{{location}}</span>
                 <input value="" id="phone-num" class="input phone-num" type="text" name="phoneNum"
                        placeholder="Phone Number" autocomplete="off">
+
+                <div class="tips phone-num-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+
             </div>
 
         </li>
 
         <li class="clearfix" data-index="1">
-            <input id="captcha" class="input captcha" type="text" name="captcha" placeholder="图形验证码"
-                   autocomplete="off" maxlength="4">
+
+            <div class="img-captcha-wrapper">
+                <input id="captcha" class="input captcha" type="text" name="captcha" placeholder="图形验证码"
+                       autocomplete="off" maxlength="4">
+
+                <div class="tips img-captcha-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+            </div>
 
             <div class="left captcha-component">
                 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
@@ -31,8 +45,17 @@
         </li>
 
         <li class="clearfix" data-index="2">
-            <input id="msg-captcha" class="input msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码"
-                   autocomplete="off" maxlength="4">
+
+            <div class="sms-captcha-wrapper">
+                <input id="msg-captcha" class="input msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码"
+                       autocomplete="off" maxlength="4">
+
+                <div class="tips sms-captcha-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+
+            </div>
             <a id="send-captcha" class="btn send-captcha disable">获取短信验证码</a>
         </li>
 
@@ -45,8 +68,17 @@
         </li>
 
         <li class="clearfix">
-            <input id="pwd" class="input pwd" name="pwd" placeholder="Password" autocomplete="off" maxlength="20"
-                   type="password">
+
+            <div class="pwd-wrapper">
+
+                <input id="pwd" class="input pwd" name="pwd" placeholder="Password" autocomplete="off" maxlength="20"
+                       type="password">
+
+                <div class="tips pwd-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+            </div>
         </li>
 
         <li class="clearfix">
@@ -62,7 +94,7 @@
             <input name="refer" id="refer" type="hidden" value="{{referUrl}}">
             <div style="width: 100%;text-align: center">
                 <input id="register-btn" class="btn btn-fixed-height disable" type="submit" value="{{regBtnText}}"
-                       >
+                >
             </div>
         </li>
         <li class="clearfix quick-login-container">
@@ -77,11 +109,6 @@
         <b></b>
     </div>
 
-    <div class="tips hide">
-        <div class="triangle"></div>
-        <div class="rectangle"></div>
-    </div>
-
     <input name="" type="hidden" id="open-id" value="{{openId}}"/>
     <input name="" type="hidden" id="source-type" value="{{sourceType}}"/>
 </div>

@@ -29,7 +29,7 @@ $('#prise-btn').click(function() {
     if (prising) {
         return;
     }
-    $this.toggleClass('liked');
+
     if ($this.hasClass('liked')) {
 
         // 点赞
@@ -49,6 +49,7 @@ $('#prise-btn').click(function() {
     }).then(function(data) {
         if (data.code === 200) {
             $this.find('.like-num').html(data.data);
+            $this.toggleClass('liked');
         } else {
             new _alert(data.message).show();
         }

@@ -19,8 +19,6 @@ $('.editorial-index-page').on('click', '.like-icon', function() {
     var $this = $(this),
 
         // prising = false,
-
-        // num = parseInt($this.next().html(), 10),
         msgId = $this.closest('.msg-content').data('id'),
         url;
 
@@ -30,7 +28,6 @@ $('.editorial-index-page').on('click', '.like-icon', function() {
 
     // prising = msgId;
 
-    $this.toggleClass('liked');
     if ($this.hasClass('liked')) {
         url = '/editorial/info/cancelPraise';
     } else {
@@ -45,7 +42,7 @@ $('.editorial-index-page').on('click', '.like-icon', function() {
         }
     }).then(function(data) {
         if (data.code === 200) {
-            console.log(data);
+            $this.toggleClass('liked');
             $this.next('b').html(data.data);
         } else {
             new _alert(data.message).show();

@@ -15,7 +15,6 @@ $('.editorial-list-page').on('click', '.like-icon', function() {
         msgId = $this.closest('.msg-content').data('id'),
         url;
 
-    $this.toggleClass('liked');
     if ($this.hasClass('liked')) {
         url = '/editorial/info/cancelPraise';
     } else {
@@ -30,6 +29,7 @@ $('.editorial-list-page').on('click', '.like-icon', function() {
         }
     }).then(function(data) {
         if (data.code === 200) {
+            $this.toggleClass('liked');
             $this.next('b').removeClass('num-0').children('.num').html(data.data);
         }
         if (data.code === 500) {

@@ -15,7 +15,6 @@ var $regionCodeText = $('#country-code'),
     $imgCaptchaInput = $('#verifyCode'),
     $regionSelectCtrl = $('#area'),
     $nextBtn = $('#find-btn'),
-    $phone = $('#phone'),
     $form = $('#back-form');
 
 var emailRegx = regx.emailRegx,
@@ -23,23 +22,16 @@ var emailRegx = regx.emailRegx,
 
 var ep = new EventProxy();
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
 }
 
-function hideTip() {
-    return $errTip.addClass('hide');
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 require('yoho-jquery-placeholder');
@@ -64,7 +56,7 @@ function validatePhoneNumAsync() {
         if (data.code === 200) {
             return true;
         } else if (data.code === 402) {
-            errTip($phone, '该账号不存在');
+            errTip($phoneNumInput, '该账号不存在');
             return false;
         } else if (data.code === 400) {
             refreshImgCaptcha();
@@ -89,7 +81,7 @@ function validatePhoneNumLocal() {
                 if (val.length === 11 && phoneRegx['+86'].test(val)) {
                     return true;
                 } else {
-                    errTip($phone, '手机号码不正确，请重新输入');
+                    errTip($phoneNumInput, '手机号码不正确，请重新输入');
                     return false;
                 }
             }
@@ -99,12 +91,12 @@ function validatePhoneNumLocal() {
             if (emailRegx.test(val)) {
                 return true;
             } else {
-                errTip($phone, '邮箱格式不正确，请重新输入');
+                errTip($phoneNumInput, '邮箱格式不正确，请重新输入');
                 return false;
             }
         }
     } else {
-        errTip($phone, '请输入帐号');
+        errTip($phoneNumInput, '请输入帐号');
         return false;
     }
 }
@@ -118,7 +110,7 @@ function validatePhoneNum() {
                 if (result) {
                     defer.resolve(true);
                 } else {
-                    errTip($phone, '帐号不存在');
+                    errTip($phoneNumInput, '帐号不存在');
                     defer.reject(false);
                 }
             });
@@ -130,6 +122,7 @@ function validatePhoneNum() {
     }
 
     return validate().then(function() {
+        hideTip($phoneNumInput);
         ep.emit('phone-num', true);
     }).fail(function() {
         ep.emit('phone-num', false);
@@ -215,13 +208,13 @@ exports.init = function() {
 
     ep.on('phone-num', function(auth) {
         if (auth) {
-            hideTip();
+            hideTip($phoneNumInput);
         }
     });
 
     ep.on('captcha-img', function(auth) {
         if (auth) {
-            hideTip();
+            hideTip($imgCaptchaInput);
         } else {
             refreshImgCaptcha();
         }
@@ -229,6 +222,12 @@ exports.init = function() {
 
     $imgCaptchaInput.on('blur', function() {
         validateImgCaptcha();
+    }).on('focus', function() {
+        hideTip($imgCaptchaInput);
+    });
+
+    $phoneNumInput.on('focus', function() {
+        hideTip($phoneNumInput);
     });
 
     $nextBtn.on('click', function() {

@@ -16,23 +16,16 @@ var ep = new EventProxy();
 
 var pwdRegx = require('../common/mail-phone-regx').pwdValidateRegx;
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
 }
 
-function hideTip() {
-    return $errTip.addClass('hide');
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 require('yoho-jquery-placeholder');
@@ -93,12 +86,12 @@ $repasswordInput.on('keyup blur', function() {
 
 ep.on('repwd', function(repwdAuth) {
     if (repwdAuth) {
-        hideTip();
+        hideTip($repasswordInput);
     }
 });
 
 ep.on('pwd', function(pwdAuth) {
     if (pwdAuth) {
-        hideTip();
+        hideTip($passwordInput);
     }
 });

@@ -12,23 +12,16 @@ var $smsCaptchaCtrl = $('#send-captcha'),
 
 var second = 60;
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
 }
 
-function hideTip() {
-    $errMsg.addClass('hide');
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 function sendSMSCaptchaAsync() {
@@ -98,6 +91,8 @@ $smsCaptchaInput.on('blur', function() {
         errTip($smsCaptchaInput, '验证码不正确');
         $next.addClass('disable').attr('href', 'javascript:;');
     }
+}).on('focus', function() {
+    hideTip($smsCaptchaInput);
 });
 
 function init() {

@@ -37,21 +37,18 @@ var checkbox = {
     unchecked: ''
 };
 
-var $errTip = $('.tips');
-var $errMsg = $errTip.find('.rectangle');
-
 require('yoho-jquery-placeholder');
 
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
+}
+
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 // 验证账户名
@@ -67,7 +64,7 @@ function validateAccountLocal() {
                 if (phoneNum.length === 11 && mailPhoneRegx.phoneRegx['+86'].test(phoneNum)) {
                     return true;
                 } else {
-                    errTip($phone, '手机号码不正确，请重新输入');
+                    errTip($phoneNumInput, '手机号码不正确，请重新输入');
                     return false;
                 }
             }
@@ -79,13 +76,13 @@ function validateAccountLocal() {
             if (mailPhoneRegx.emailRegx.test(phoneNum)) {
                 return true;
             } else {
-                errTip($phone, '邮箱格式不正确，请重新输入');
+                errTip($phoneNumInput, '邮箱格式不正确，请重新输入');
                 return false;
             }
         }
 
     } else {
-        errTip($phone, '请输入账号');
+        errTip($phoneNumInput, '请输入账号');
         return false;
     }
 }
@@ -102,7 +99,7 @@ function validateAccountAsync() {
         if (data.code && data.code === 200) {
             return true;
         } else {
-            errTip($phone, '账号不存在');
+            errTip($phoneNumInput, '账号不存在');
             return false;
         }
     });
@@ -128,6 +125,7 @@ function validateAccount() {
     }
 
     return validate().then(function() {
+        hideTip($phoneNumInput);
         ep.emit('phone', true);
     }).fail(function() {
         ep.emit('phone', false);
@@ -252,6 +250,7 @@ mailAc($phoneNumInput, function() {
 });
 
 $phoneNumInput.on('focus', function() {
+    hideTip($phoneNumInput);
     $phone.addClass('focus');
 }).on('blur', function() {
     $phone.removeClass('focus');
@@ -272,6 +271,8 @@ $passwordInput.on('blur', function() {
     validatePasswordLocal();
 }).on('focus', function() {
     $passwordInput.addClass('focus');
+
+    hideTip($passwordInput);
 });
 
 // 验证码
@@ -322,19 +323,19 @@ ep.tail('phone', 'password', 'captcha', function(phoneAuth, passwordAuth, captch
 
 ep.on('phone', function(auth) {
     if (auth) {
-        $errTip.addClass('hide');
+        hideTip($phoneNumInput);
     }
 });
 
 ep.on('password', function(auth) {
     if (auth) {
-        $errTip.addClass('hide');
+        hideTip($passwordInput);
     }
 });
 
 ep.on('captcha', function(auth) {
     if (auth && !$captchaWrap.hasClass('hide')) {
-        $errTip.addClass('hide');
+        hideTip($imgCaptchaInput);
     }
 });
 

@@ -9,8 +9,7 @@ var $ = require('yoho-jquery'),
     computeComplex = require('../common/pwd-strength'),
     EventProxy = require('yoho-eventproxy');
 
-var $registerPage = $('.register-page'),
-    $phone = $('#phone');
+var $registerPage = $('.register-page');
 
 var $phoneNumInput = $('#phone-num'),
     $smsCaptchaInput = $('#msg-captcha'),
@@ -22,6 +21,7 @@ var $phoneNumInput = $('#phone-num'),
     $regionCodeText = $('#country-code'),
     $registerBtn = $('#register-btn');
 
+var $phone = $phoneNumInput;
 var second = 60;
 var ep = new EventProxy();
 
@@ -35,25 +35,18 @@ var checkboxIcon = {
     unchecked: ''
 };
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 require('yoho-jquery-placeholder');
 
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
 }
 
-function hideTip() {
-    return $errTip.addClass('hide');
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 setTimeout(function() {
@@ -162,7 +155,7 @@ function validateImgCaptcha() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($imgCaptchaInput);
         ep.emit('captcha-img', true);
     }).fail(function() {
         ep.emit('captcha-img', false);
@@ -230,7 +223,7 @@ function validateSMSCaptcha() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($smsCaptchaInput);
         ep.emit('captcha-sms', true);
     }).fail(function() {
         ep.emit('captcha-sms', false);
@@ -284,7 +277,7 @@ function validatePhoneNum() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($phone);
         ep.emit('phone-num', true);
     }).fail(function() {
         ep.emit('phone-num', false);
@@ -322,7 +315,7 @@ function validatePassword() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($passwordInput);
         ep.emit('password', true);
     }).fail(function() {
         ep.emit('password', false);
@@ -450,11 +443,15 @@ exports.init = function() {
     // 验证手机输入
     $phoneNumInput.on('keyup blur', function() {
         validatePhoneNum();
+    }).on('focus', function() {
+        hideTip($phoneNumInput);
     });
 
     // 验证图形输入
     $imgCaptchaInput.on('keyup blur', function() {
         validateImgCaptcha();
+    }).on('focus', function() {
+        hideTip($imgCaptchaInput);
     });
 
     // 图形验证通过时，发送短信按钮可点击
@@ -469,6 +466,8 @@ exports.init = function() {
     // 验证短信输入
     $smsCaptchaInput.on('keyup blur', function() {
         validateSMSCaptcha();
+    }).on('focus', function() {
+        hideTip($smsCaptchaInput);
     });
 
     // 验证密码输入
@@ -478,6 +477,8 @@ exports.init = function() {
         validatePassword().always(function() {
             validatePasswordComplexLocal($this);
         });
+    }).on('focus', function() {
+        hideTip($passwordInput);
     });
 
     // 服务条款

@@ -16,29 +16,28 @@ var jQuery = require('yoho-jquery'),
 
     var methods = {
         show: function() {
-            var $parent = this.parent(),
-                topLeft = $parent.offset(),
-                $tips = this.find('.tips');
+            var $this = this,
+                $tips = $this.next('.tips');
 
             if ($tips.length !== 0) {
                 $tips.find('.rectangle').text(arguments[0]).removeClass('hide');
             } else {
-                $parent.append(tplFn({content: arguments[0]}));
-                $tips = $parent.find('.tips').removeClass('hide');
+                $this.after(tplFn({content: arguments[0]}));
+                $tips = $this.next('.tips').removeClass('hide');
                 $tips.css({
-                    top: $parent.height() - 2,
-                    left: topLeft.left,
-                    width: this.width() + 2,
-                    height: this.height
+                    top: $this.height() - 2,
+                    left: 0,
+                    width: $this.width() + 2,
+                    height: $this.height
                 });
             }
 
             return $tips;
         },
         hide: function() {
-            var $parent = this.parent();
+            var $tips = this.next('.tips');
 
-            return $parent.find('.tips').addClass('hide');
+            return $tips.addClass('hide');
         }
 
     };

@@ -104,6 +104,10 @@
     .center {
         text-align: center;
     }
+
+    .sms-captcha-wrapper {
+        width: $captcha;
+    }
 }
 
 .send-email-page {

@@ -109,4 +109,12 @@
             text-align: center;
         }
     }
+
+    .pwd-wrapper {
+        width: 100%;
+    }
+
+    .img-captcha-wrapper {
+        width: $captcha;
+    }
 }

@@ -173,10 +173,21 @@
         .agree-terms {
             cursor: pointer;
             .small {
-                @mixin small
-            ;
+                @mixin small;
             }
         }
+
+        .img-captcha-wrapper {
+            width: $captcha;
+        }
+
+        .sms-captcha-wrapper {
+            width: $captcha;
+        }
+
+        .pwd-wrapper {
+            width: 100%;
+        }
     }
 }
 

 .tips {
     position: absolute;
-    top: 41px;
+    top: 40px;
     width: inherit;
+    z-index: 3;
 
     .rectangle {
         width: 100%;