登录 login

Andy
1 parent a374798a
Showing 2 changed files with 223 additions and 2 deletions
js/login.js
login.html
 /**
  * Created by chenbiao on 2017/11/20.
  */
+
+/**
+ *  输入框内容检测插件
+ */
+var $imageCodeValue = $('#login_imgCode_value');
+var $imageCode = $('#login_imgCode');
+var flagAjax = false;
+jQuery.fn.inputCheck = function(properties){
+    var defaults = {
+        callback:function(){}
+    }
+    jQuery.extend(defaults,properties);
+    var result = new Object(),realLength = 0, len = this.val().length, charCode = -1;
+    var regexp = {
+        china: /[\u4E00-\u9FA5]/, // 中文
+        decimal: /^\d+(\.\d+)?$/, // 小数
+        number: /^[0-9]*[1-9][0-9]*$/,
+        password:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/,
+        phone: /^1[3,5,7,8]\d{9}$/, // 手机号码
+        tel: /^0\d{2,3}-?\d{7,8}$/, // 电话号码
+        specialPhone: /^(10086|10000|10010)$/, //特殊的电话号码
+        businessPhone: /^(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{3,7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/, //400的号码验证
+        email: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+
+        peopleId: /\d{17}[\d|x]|\d{15}/,
+        username: /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9_\u4E00-\u9FA5]{5,15}$/,
+        date: /^((((19|20)\d{2})-(0?(1|[3-9])|1[012])-(0?[1-9]|[12]\d|30))|(((19|20)\d{2})-(0?[13578]|1[02])-31)|(((19|20)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))-0?2-29))$/,
+        nbsp: /\s/ //判断空格
+    }
+
+    //计算输入框内容的长度，一个中文等于两个字符
+    for (var i = 0; i < len; i++) {
+        charCode = this.val().charCodeAt(i);
+        if (charCode >= 0 && charCode <= 128) realLength += 1;
+        else realLength += 2;
+    }
+
+    result.china = regexp.china.test(this.val())  ? true : false;
+    result.decimal = regexp.decimal.test(this.val())  ? true : false;
+    result.password = regexp.password.test(this.val())  ? true : false;
+    result.number = regexp.number.test(this.val())  ? true : false;
+    result.phone = regexp.phone.test(this.val()) || regexp.tel.test(this.val()) || regexp.specialPhone.test(this.val()) || regexp.businessPhone.test(this.val())  ? true : false;
+    result.email = regexp.email.test(this.val())  ? true : false;
+
+    result.nbsp = regexp.nbsp.test(this.val())  ? true : false;
+    result.peopleId = regexp.peopleId.test(this.val())  ? true : false;
+    result.username = regexp.username.test(this.val())  ? true : false;
+    result.date = regexp.date.test(this.val())  ? true : false;
+    result.length = realLength/2;
+    defaults.callback(result);
+};
+//邮箱验证
+function username(obj) {
+    var _this = obj;
+    _this.inputCheck({
+        callback : function(result){
+            if(!result.email){
+                _this.next().removeClass('display-hide');
+                flagAjax = false;
+            }else{
+                _this.next().addClass('display-hide');
+                flagAjax = true;
+            }
+        }
+    });
+}
+$('#userName').on("blur", function() { //验证邮箱地址
+    username($(this));
+});
+//密码验证
+function password(obj){
+    var _this = obj;
+    _this.inputCheck({
+        callback : function(result){
+            if(!result.password){
+                _this.next().removeClass('display-hide');
+                flagAjax = false;
+            }else{
+                _this.next().addClass('display-hide');
+                flagAjax = true;
+            }
+        }
+    });
+}
+$('#password').on("blur", function() { //验证邮箱地址
+    password($(this));
+});
+//验证码验证
+//function verification(obj) {
+//  var _this = obj;
+//  if(_this.val() !== '1234'){
+//      _this.prev().addClass('glyphicon glyphicon-remove');
+//      return false;
+//  }else{
+//      _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
+//  }
+//}
+//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址
+//  verification($(this));
+//});
+//点击登陆
+$('#login-btn').on('click',function () {
+    var obj1 = $('#userName');
+    var obj2 = $('#password');
+    username(obj1);
+    password(obj2);
+    //verification($('#login_imgCode_value'));
+    if(flagAjax){
+        var Username= $('#userName').val();
+        var Password= $('#password').val();
+        var imageCode = $imageCodeValue.val();
+        // alert("username is "+username+"password is"+password+"code is "+imageCode);
+
+
+        var opts = {};
+        opts.method = "POST";
+        opts.url = dataUrl.util.getLogin();
+        opts.success = loginSuccess;
+
+        var data = {};
+        data.clientType = sysComm.clientType;
+        data.sysCode = sysComm.sysCode;
+        data.grantType = sysComm.grantType;
+        data.username = Username;
+        data.password = Password;
+        data.imgCode = imageCode;
+        data.expiresIn = 60 * 60 * 12;//默认12小时
+        opts.data = JSON.stringify(data);
+        sysAjax(opts);
+
+    }
+
+    // window.location.href='index.html';
+});
+//回车事件
+$('#login_imgCode_value').keyup(function(event){
+    if(event.keyCode ==13){
+        // $('#login-btn').onClick()
+        $('#login-btn').trigger("click");
+    }
+});
+$('#login_imgCode_value').on('input',function () {
+    var val = $('#login_imgCode_value').val();
+    if(val){
+        $('.verification-logo').addClass('glyphicon glyphicon-remove');
+    }else{
+        $('.verification-logo').removeClass('glyphicon glyphicon-remove');
+    }
+
+});
+$('.verification-logo').on('click',function () {
+    $("#login_imgCode_value").val("");
+    $('.verification-logo').removeClass('glyphicon glyphicon-remove');
+});
+getImgCode();
+
+//点击换验证码
+$('#login_imgCode').on('click', function () {
+    getImgCode();
+});
+function getImgCode() {
+    var opt = {
+        method: "get",
+        url: dataUrl.util.getLoginImageCode(),
+        success: imgCodeSuccess
+    }
+    sysAjax(opt);
+}
+function imgCodeSuccess(res) {
+    if (res.code === '8888') {
+        var imageCodeStr = res.data.imageCodeStr;
+        var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr;
+        fn.setToken(res.data.authTokenid);
+        $imageCode.attr('src', base64ImgStr);
+    }
+
+}
+//登录成功的函数
+function loginSuccess(res) {
+    if (res.code === '8888') {
+        // var data = JSON.parse(res.data);
+        fn.setToken(res.data.accessToken);
+        fn.setUserName(res.data.userName);
+        fn.setUserId(res.data.userId);
+        fn.setOpImgPath(res.data.imgPath);
+        /**将系统编码及名称放入session.*/
+        sessionStorage.setItem("sysCode", res.data.sysCode);
+        sessionStorage.setItem("sysName", res.data.sysName);
+        //alert("success");
+        fn.setUserAccount(res.data.userName);
+        window.location.href = "index.html";
+    } else if (res.code == "2000" || res.code === '1004') {
+        //账号密码不匹配
+        $('#login_error_ifo').text("账号密码不匹配");
+        //$error.text("账号或密码错误!");
+        getImgCode();
+    } else if (res.code == "2001") {
+        //账号无有效角色，非有效用户
+        $('#login_error_ifo').text("账号无效");
+        //$error.text("账号无有效角色，非有效用户!");
+        getImgCode();
+    } else if (res.code == "2002") {
+        //验证码错误
+        // $('.verification-logo').addClass('glyphicon glyphicon-remove');
+        $('#login_error_ifo').text("验证码错误");
+        //return false;
+        // $imageCodeValue.focus();
+        getImgCode();
+    } else if(res.code == "2010"){
+        $('#login_error_ifo').text("用户没有关联停车场");
+        getImgCode();
+    }
+    else {
+        console.log(res.code);
+        $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
+        $('#login_error_ifo').text("系统错误");
+        // $error.text(res.msg);
+        getImgCode();
+    }
+
+}
 \ No newline at end of file
@@ -34,7 +34,7 @@
         <div class="psw-cont">
             <div class="cont-psw clearfix">
                 <span class="psw-bg"></span>
-                <input class="login-control" type="text" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" id="passWord" maxlength="25">
+                <input class="login-control" type="text" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" id="password" maxlength="25">
             </div>
         </div>
         <!-- yanzhengma -->
@@ -45,7 +45,7 @@
                 <input class="ver-control verification-input float-left" type="text" autocomplete="off" placeholder="请输入验证码" name="" maxlength="4" id="login_imgCode_value">
             </div>
             <span class="imgWrap float-left">
-                    <!--<img src="" id="login_imgCode">-->
+                    <img src="" id="login_imgCode">
             </span>
         </div>
         <!--error -->