Authored by htoooth

tips调整,找回密码首页

... ... @@ -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>
... ...
... ... @@ -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);
... ... @@ -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() {
... ...
... ... @@ -104,6 +104,10 @@
.center {
text-align: center;
}
.sms-captcha-wrapper {
width: $captcha;
}
}
.send-email-page {
... ...