login validate

@@ -20,10 +20,12 @@
                     <li class="relative">
                         <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
                         <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
+                        <span class="err-tip hide"></span>
                     </li>
                     <li class="relative">
                         <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 class="err-tip hide">请输入密码</span>
                     </li>
                     <li>
                         <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']
 };
 
-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'),
     $countryCodeEm = $('#country-code > em'),
@@ -18,6 +23,8 @@ var $countryCodeHide = $('#country-code-hide'),
 
 var $emailAutoComplete = $('#email-autocomplete');
 
+var mailPhoneRegx = require('./mail-phone-regx');
+
 //checkbox status unicode
 var checkbox = {
     checked: '',
@@ -26,6 +33,95 @@ var checkbox = {
 
 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.text(err).removeClass('hide');
+        $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.text(err).removeClass('hide');
+        $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').text('请输入账户名和密码').removeClass('hide');
+            $passwordTip.addClass('hide');
+            $password.addClass('error');
+        } else {
+            $accountTip.text('请输入账户名').removeClass('hide');
+        }
+    }
+
+    return pass;
+}
+
 //展开地区列表
 $('#country-code').on('click', function() {
     if ($countryList.css('display') === 'none') {
@@ -56,7 +152,7 @@ $(document).on('click', function(e) {
     }
 });
 
-//邮箱自动完成
+//邮箱
 $account.on('keyup', function() {
     var account = $.trim($(this).val()),
         html = '',
@@ -95,14 +191,34 @@ $account.on('keyup', function() {
 }).on('blur', function() {
     emailAcTime = setTimeout(function() {
         $emailAutoComplete.addClass('hide');
+
+        //验证
+        validateAccount();
     }, 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() {
     clearTimeout(emailAcTime); //清空默认关闭
 
-    $account.val($(this).text());
+    $account.val($(this).text()).focus();
 
     $emailAutoComplete.addClass('hide');
 });
@@ -119,3 +235,21 @@ $('.remeber-me').on('click', function() {
         $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();
+    }
+});
\ No newline at end of file

@@ -36,6 +36,17 @@
         background-color: #ff1901;
         letter-spacing: 10px;
         font-size: 20px;
+        cursor: pointer;
+    }
+
+    .err-tip {
+        position: absolute;
+        font-size: 14px;
+        white-space: nowrap;
+        top: 8px;
+        left: 285px;
+        padding: 6px 0 6px 20px;
+        color: #f00;
     }
 }