conflict index.scss

@@ -20,10 +20,18 @@
                     <li class="relative">
                     <li class="relative">
                         <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
                         <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
                         <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
                         <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
+                        <span class="err-tip hide">
+                            <i></i>
+                            <em></em>
+                        </span>
                     </li>
                     </li>
                     <li class="relative">
                     <li class="relative">
                         <input id="password" class="password input va" name="password" type="text" placeholder="密码" autocomplete="off" maxlength="20">
                         <input id="password" class="password input va" name="password" type="text" placeholder="密码" autocomplete="off" maxlength="20">
                         <span id="caps-lock" class="caps-lock hide">大写状态开启</span>
                         <span id="caps-lock" class="caps-lock hide">大写状态开启</span>
+                        <span class="err-tip hide">
+                            <i></i>
+                            <em>请输入密码</em>
+                        </span>
                     </li>
                     </li>
                     <li>
                     <li>
                         <span id="login-btn" class="login-btn btn">登录</span>
                         <span id="login-btn" class="login-btn btn">登录</span>

@@ -10,7 +10,12 @@ var mailPostfix = {
     other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
     other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
 };
 };
 
 
-var $account = $('#account');
+var $account = $('#account'),
+    $password = $('#password');
+
+var $accountTip = $account.siblings('.err-tip'),
+    $passwordTip = $password.siblings('.err-tip'),
+    $capsLock = $('#caps-lock');
 
 
 var $countryCodeHide = $('#country-code-hide'),
 var $countryCodeHide = $('#country-code-hide'),
     $countryCodeEm = $('#country-code > em'),
     $countryCodeEm = $('#country-code > em'),
@@ -18,6 +23,8 @@ var $countryCodeHide = $('#country-code-hide'),
 
 
 var $emailAutoComplete = $('#email-autocomplete');
 var $emailAutoComplete = $('#email-autocomplete');
 
 
+var mailPhoneRegx = require('./mail-phone-regx');
+
 //checkbox status unicode
 //checkbox status unicode
 var checkbox = {
 var checkbox = {
     checked: '',
     checked: '',
@@ -26,6 +33,95 @@ var checkbox = {
 
 
 var emailAcTime;
 var emailAcTime;
 
 
+//验证账户名
+function validateAccount() {
+    var pass = false,
+        account = $.trim($account.val()),
+        err;
+
+    if (account !== '') {
+        if (/^[0-9]+$/.test(account)) {
+
+            //如果是纯数字，则作为手机号码处理
+            if (mailPhoneRegx.phoneRegx['+' + $countryCodeHide.val()].test(account)) {
+                pass = true;
+            } else {
+                pass = false;
+                err = '手机号码不正确，请重新输入';
+            }
+        } else {
+            if (mailPhoneRegx.emailRegx.test(account)) {
+                pass = true;
+            } else {
+                pass = false;
+                err = '邮箱格式不正确，请重新输入';
+            }
+        }
+    } else {
+        err = '请输入账户名';
+    }
+
+    if (pass) {
+        $accountTip.addClass('hide');
+        $account.removeClass('error');
+    } else {
+        $accountTip.removeClass('hide').children('em').text(err);
+        $account.addClass('error');
+    }
+    return pass;
+}
+
+//验证密码
+function validatePassword() {
+    var pass = false,
+        password = $.trim($password.val()),
+        err;
+
+    if (password !== '') {
+        if (password.length < 6) {
+            err = '请输入长度为6-20字符的密码';
+        } else {
+            pass = true;
+        }
+    } else {
+        err = '请输入密码';
+    }
+
+    if (pass) {
+        $passwordTip.addClass('hide');
+        $password.removeClass('error');
+    } else {
+        $passwordTip.removeClass('hide').children('em').text(err);
+        $password.addClass('error');
+    }
+}
+
+//验证
+function validate() {
+    var pass = true,
+        account = $.trim($account.val()),
+        password = $.trim($password.val());
+
+    if (account !== '') {
+        pass = validateAccount() && validatePassword();
+    } else {
+        pass = false;
+        $account.addClass('error');
+
+        if (password === '') {
+
+            //账户名和密码都为空的情况下点击登陆，只在账户输入框后显示错误提示
+            $accountTip.addClass('both-error').removeClass('hide').children('em').text('请输入账户名和密码');
+            $passwordTip.addClass('hide');
+            $password.addClass('error');
+        } else {
+            $accountTip.removeClass('hide').children('em').text('请输入账户名');
+        }
+    }
+
+    return pass;
+}
+
 //展开地区列表
 //展开地区列表
 $('#country-code').on('click', function() {
 $('#country-code').on('click', function() {
     if ($countryList.css('display') === 'none') {
     if ($countryList.css('display') === 'none') {
@@ -56,7 +152,7 @@ $(document).on('click', function(e) {
     }
     }
 });
 });
 
 
-//邮箱自动完成
+//邮箱
 $account.on('keyup', function() {
 $account.on('keyup', function() {
     var account = $.trim($(this).val()),
     var account = $.trim($(this).val()),
         html = '',
         html = '',
@@ -95,14 +191,34 @@ $account.on('keyup', function() {
 }).on('blur', function() {
 }).on('blur', function() {
     emailAcTime = setTimeout(function() {
     emailAcTime = setTimeout(function() {
         $emailAutoComplete.addClass('hide');
         $emailAutoComplete.addClass('hide');
+
+        //验证
+        validateAccount();
     }, 200);
     }, 200);
+
+});
+
+//密码
+$password.on('blur', function() {
+    validatePassword();
+}).on('keypress', function(e) {
+    var code = e.which,
+        isShift = e.shiftKey || (code === 16) || false;
+
+    //CapsLock检测
+    if ((!isShift && (code >= 65 && code <= 90)) ||
+        (isShift && (code >= 97 && code <= 122))) {
+        $capsLock.removeClass('hide');
+        return;
+    }
+    $capsLock.addClass('hide');
 });
 });
 
 
 //邮箱自动完成列表项点击
 //邮箱自动完成列表项点击
 $emailAutoComplete.on('click', 'li', function() {
 $emailAutoComplete.on('click', 'li', function() {
     clearTimeout(emailAcTime); //清空默认关闭
     clearTimeout(emailAcTime); //清空默认关闭
 
 
-    $account.val($(this).text());
+    $account.val($(this).text()).focus();
 
 
     $emailAutoComplete.addClass('hide');
     $emailAutoComplete.addClass('hide');
 });
 });
@@ -118,4 +234,22 @@ $('.remeber-me').on('click', function() {
     } else {
     } else {
         $this.children('i').html(checkbox.unchecked);
         $this.children('i').html(checkbox.unchecked);
     }
     }
+});
+
+//focus到输入框则隐藏错误提示和样式
+$('.va').on('focus', function() {
+    var $this = $(this);
+
+    $this.removeClass('error');
+
+    $this.siblings('.err-tip').addClass('hide');
+});
+
+//登录
+$('#login-btn').on('click', function() {
+    var pass = validate();
+
+    if (pass) {
+        $('#login-form').submit();
+    }
 });
 });

 @import "login", "register", "back";
 @import "login", "register", "back";
 
 
+$tip: sprite-map("passport/tip/*.png", $spacing: 10px);
+/**/
+
 .passport-page {
 .passport-page {
     width: 1150px;
     width: 1150px;
     margin-left: auto;
     margin-left: auto;
@@ -37,6 +40,8 @@
         background-color: #ff1901;
         background-color: #ff1901;
         letter-spacing: 10px;
         letter-spacing: 10px;
         font-size: 20px;
         font-size: 20px;
+        cursor: pointer;
+        
         &.disable {
         &.disable {
             background-color: #555;
             background-color: #555;
             cursor: default;
             cursor: default;
@@ -105,6 +110,24 @@
             color: #b9b9b9;
             color: #b9b9b9;
         }
         }
     }
     }
+    .err-tip {
+        position: absolute;
+        font-size: 14px;
+        white-space: nowrap;
+        top: 8px;
+        left: 285px;
+        padding: 6px 0;
+        color: #f00;
+
+        i {
+            display: block;
+            float: left;
+            height: 14px;
+            width: 14px;
+            background: sprite($tip, error) no-repeat;
+            margin-right: 5px;
+        }
+    }
 }
 }
 
 
 .passport-cover {
 .passport-cover {

-@import "passport/*.png";
-$third: sprite-map("passport/*.png");
+$third: sprite-map("passport/third/*.png");
 
 
 .login-page {
 .login-page {
     .relative {
     .relative {