Authored by xuqi

login auth.Review by:@xuqi

@@ -3,73 +3,71 @@ @@ -3,73 +3,71 @@
3 {{# passport}} 3 {{# passport}}
4 {{> passport/cover}} 4 {{> passport/cover}}
5 <div class="content"> 5 <div class="content">
6 - <form id="login-form" method="POST" action="/passport/login/login">  
7 - <ul class="login-ul">  
8 - <li class="relative clearfix">  
9 - <h2 class="title">会员登录</h2>  
10 - <span id="country-code" class="country-code right">  
11 - <em>{{countryName}} {{countryCode}}</em>  
12 - <i class="iconfont">&#xe600;</i>  
13 - <ul id="country-list" class="country-list">  
14 - {{#each countryList}}  
15 - <li data-cc="{{areaCode}}">{{name}} {{areaCode}}</li>  
16 - {{/each}}  
17 - </ul>  
18 - </span>  
19 - </li>  
20 - <li class="relative">  
21 - <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">  
22 - <ul id="email-autocomplete" class="email-autocomplete hide"></ul>  
23 - <span class="err-tip hide">  
24 - <i></i>  
25 - <em></em>  
26 - </span>  
27 - </li>  
28 - <li class="relative">  
29 - <input id="password" class="password input va" name="password" type="text" placeholder="密码" autocomplete="off" maxlength="20">  
30 - <span id="caps-lock" class="caps-lock hide">大写状态开启</span>  
31 - <span class="err-tip hide">  
32 - <i></i>  
33 - <em>请输入密码</em>  
34 - </span>  
35 - </li>  
36 - <li>  
37 - <span id="login-btn" class="login-btn btn">登录</span>  
38 - </li>  
39 - <li class="other-opts">  
40 - <span class="remeber-me">  
41 - <i class="iconfont">&#xe613;</i>  
42 - 记住登录状态  
43 - </span>  
44 - <span class="right">  
45 - <a class="forget-password" href="{{forgetPwd}}">忘记密码?</a>  
46 - |  
47 - <a class="fast-reg" href="{{fastReg}}">快速注册</a>  
48 - </span>  
49 - </li>  
50 - <li class="third-party-login">  
51 - <a href="{{weixinLogin}}">  
52 - <span class="icon weixin"></span>  
53 - </a>  
54 - <a href="{{qqLogin}}">  
55 - <span class="icon qq"></span>  
56 - </a>  
57 - <a href="{{weiboLogin}}">  
58 - <span class="icon weibo"></span>  
59 - </a>  
60 - <a href="{{alipayLogin}}">  
61 - <span class="icon alipay"></span>  
62 - </a>  
63 - <a href="{{doubanLogin}}">  
64 - <span class="icon douban"></span>  
65 - </a>  
66 - <a href="{{renrenLogin}}">  
67 - <span class="icon renren"></span>  
68 - </a>  
69 - </li>  
70 - </ul>  
71 - <input id="country-code-hide" name="countryCode" type="hidden" value="{{countryCode}}">  
72 - </form> 6 + <ul class="login-ul">
  7 + <li class="relative clearfix">
  8 + <h2 class="title">会员登录</h2>
  9 + <span id="country-code" class="country-code right">
  10 + <em>{{countryName}} {{countryCode}}</em>
  11 + <i class="iconfont">&#xe600;</i>
  12 + <ul id="country-list" class="country-list">
  13 + {{#each countryList}}
  14 + <li data-cc="{{areaCode}}">{{name}} {{areaCode}}</li>
  15 + {{/each}}
  16 + </ul>
  17 + </span>
  18 + </li>
  19 + <li class="relative">
  20 + <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
  21 + <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
  22 + <span class="err-tip hide">
  23 + <i></i>
  24 + <em></em>
  25 + </span>
  26 + </li>
  27 + <li class="relative">
  28 + <input id="password" class="password input va" name="password" type="password" placeholder="密码" autocomplete="off" maxlength="20">
  29 + <span id="caps-lock" class="caps-lock hide">大写状态开启</span>
  30 + <span class="err-tip hide">
  31 + <i></i>
  32 + <em>请输入密码</em>
  33 + </span>
  34 + </li>
  35 + <li>
  36 + <span id="login-btn" class="login-btn btn">登录</span>
  37 + </li>
  38 + <li class="other-opts">
  39 + <span class="remeber-me">
  40 + <i class="iconfont">&#xe613;</i>
  41 + 记住登录状态
  42 + </span>
  43 + <span class="right">
  44 + <a class="forget-password" href="{{forgetPwd}}">忘记密码?</a>
  45 + |
  46 + <a class="fast-reg" href="{{fastReg}}">快速注册</a>
  47 + </span>
  48 + </li>
  49 + <li class="third-party-login">
  50 + <a href="{{weixinLogin}}">
  51 + <span class="icon weixin"></span>
  52 + </a>
  53 + <a href="{{qqLogin}}">
  54 + <span class="icon qq"></span>
  55 + </a>
  56 + <a href="{{weiboLogin}}">
  57 + <span class="icon weibo"></span>
  58 + </a>
  59 + <a href="{{alipayLogin}}">
  60 + <span class="icon alipay"></span>
  61 + </a>
  62 + <a href="{{doubanLogin}}">
  63 + <span class="icon douban"></span>
  64 + </a>
  65 + <a href="{{renrenLogin}}">
  66 + <span class="icon renren"></span>
  67 + </a>
  68 + </li>
  69 + </ul>
  70 + <input id="country-code-hide" name="countryCode" type="hidden" value="{{countryCode}}">
73 </div> 71 </div>
74 {{/ passport}} 72 {{/ passport}}
75 </div> 73 </div>
@@ -31,6 +31,8 @@ var checkbox = { @@ -31,6 +31,8 @@ var checkbox = {
31 unchecked: '&#xe613;' 31 unchecked: '&#xe613;'
32 }; 32 };
33 33
  34 +var authing = false;
  35 +
34 var emailAcTime; 36 var emailAcTime;
35 37
36 require('yoho.placeholder'); 38 require('yoho.placeholder');
@@ -46,7 +48,7 @@ function validateAccount() { @@ -46,7 +48,7 @@ function validateAccount() {
46 if (/^[0-9]+$/.test(account)) { 48 if (/^[0-9]+$/.test(account)) {
47 49
48 //如果是纯数字,则作为手机号码处理 50 //如果是纯数字,则作为手机号码处理
49 - if (mailPhoneRegx.phoneRegx['+' + $countryCodeHide.val()].test(account)) { 51 + if (mailPhoneRegx.phoneRegx[$countryCodeHide.val()].test(account)) {
50 pass = true; 52 pass = true;
51 } else { 53 } else {
52 pass = false; 54 pass = false;
@@ -97,6 +99,7 @@ function validatePassword() { @@ -97,6 +99,7 @@ function validatePassword() {
97 $passwordTip.removeClass('hide').children('em').text(err); 99 $passwordTip.removeClass('hide').children('em').text(err);
98 $password.addClass('error'); 100 $password.addClass('error');
99 } 101 }
  102 + return pass;
100 } 103 }
101 104
102 //验证 105 //验证
@@ -254,7 +257,29 @@ $('.va').on('focus', function() { @@ -254,7 +257,29 @@ $('.va').on('focus', function() {
254 $('#login-btn').on('click', function() { 257 $('#login-btn').on('click', function() {
255 var pass = validate(); 258 var pass = validate();
256 259
257 - if (pass) {  
258 - $('#login-form').submit(); 260 + if (pass && authing === false) {
  261 + authing = true;
  262 +
  263 + $.ajax({
  264 + url: '/passport/login/auth',
  265 + type: 'POST',
  266 + data: {
  267 + areaCode: $countryCodeHide.val().replace('+', ''),
  268 + account: $.trim($account.val()),
  269 + password: $.trim($password.val())
  270 + },
  271 + success: function(data) {
  272 + if (data.code === 400) {
  273 + $passwordTip.removeClass('hide').children('em').text(data.message);
  274 + $password.addClass('error');
  275 + return;
  276 + } else {
  277 + location.href = data.data.href;
  278 + }
  279 + },
  280 + complete: function() {
  281 + authing = false;
  282 + }
  283 + });
259 } 284 }
260 }); 285 });