angularjs 1.x 项目完整的较完整的登录验证具体代码（仅供参考）

最新推荐文章于 2024-11-05 15:26:40 发布

weixin_30745553

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量108

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/mgqworks/p/7489766.html

版权

html代码：

<div class="center container">
    <div class="login ">
        <form class="form-horizontal" name="signupForm" novalidate>
            <div class="login-title">
                <span>SUPPORT CENTER</span>
            </div>
            <div class="enter-full-tip" ng-show="isFull">
                fill in username and password in format
            </div>
            <div class="username"
                 ng-class="{'has-success': signupForm.username.$valid, 'has-error': signupForm.username.$invalid && signupForm.username.$dirty}">
                <input id="username"
                       type="text" name="username" class="form-control" placeholder="username"
                       ng-model="usernameText"
                       ng-required="required"
                       ng-minlength="6"
                       ng-maxlength="40">
                <div class="help-block" ng-show="signupForm.username.$dirty && signupForm.username.$error.minlength">
                    username should more than 6 characters.
                </div>
                <div class="help-block" ng-show="signupForm.username.$dirty && signupForm.username.$error.maxlength">
                    username should less than 40 characters
                </div>
            </div>
            <!--密码-->
            <div class="password"
                 ng-class="{'has-success': signupForm.password.$valid && signupForm.password.$dirty, 'has-error': signupForm.password.$invalid && signupForm.password.$dirty}">

                <input id="password"
                       type="password" name="password" class="form-control" placeholder="password"
                       autocomplete="off"
                       ng-model="passwordText"
                       ng-required="required"
                       ng-minlength="8"
                       ng-maxlength="100">
                <div class="help-block" ng-messages="signupForm.password.$dirty && signupForm.password.$error">
                    <div ng-message="required">password empty.</div>
                    <div ng-message="minlength">password should more than 8 characters.</div>
                    <div ng-message="maxlength">password should less than 100 characters.</div>
                </div>
            </div>
            <div class="tip hide">
                <i class="glyphicon glyphicon-minus-sign"></i>
                username and password don`t match.
            </div>
            <div class="notice hide">
                please enter username and password
            </div>
            <button class="aia-btn" ng-click="loginFn()" ng-disabled="isDisabled">Sign in</button>
        </form>

        <div class="forget-password" ng-click="forgotPwdFn()">
            <span>forget your password ?</span>
        </div>
    </div>
</div>




CSS代码：

.html,body{
    margin: 0;
    padding: 0;
    border:1px solid #363E3F;
}
.center{
    margin: 0 auto;
}
.login{
    width: 300px;
    height: 321px;
    background-color: #D5D5D5;
    margin: 135px auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border:1px solid #363E3F;
}
.login .login-title{
    width: 282px;   
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    line-height: 31px;
    text-align: center;
}
.login .login-title span{
    font-size: 20px;
    font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial';
    font-weight:bold;
}
.login .form-horizontal .enterfullTip{
    width: 275px;
    position: absolute;
    top: 65px;
    left: 20px;
    color: #f00;
}
.login .form-horizontal .emptyTip{
    width: 275px;
    color: #f00;
    text-align: center;
    position: absolute;
    top: 65px;
    left: 10px;
}
.username input, .password input{
    margin: 0 auto;
    width: 265px;
    height: 30px;
    padding-left:8px;
}
.username{
    width: 275px;
    height: 35px;
    margin: 0 auto;
    margin-top: 40px;
}
.password{
    width: 275px;
    height: 35px;
    margin: 0 auto;
    margin-top: 20px;
}
.username .help-block,.password .help-block{
    margin-left:7px;
    /*margin-bottom:10px;*/
}
.btn{
    float: right;
    margin:25px 20px 0px 0px;
    background-color: #fff;
    border:1px solid #000;
    color: #000;
    height: 34px;
}
/*this is the tip when the user entered incorrect username or password */

.login .form-horizontal .tip{
    width: 275px;
    height: 35px;
    position: absolute;
    top: 53px;
    left: 16px;
    font-size:12px;
    color: #f00;
    margin: 0 auto;
}
.login .form-horizontal .tip i{
    display: inline-block;
}
.login .form-horizontal .tip span{
    display: inline-block;
}
/*forget the password*/

.login .forget-password{
    width: 145px;
    height: 35px;
    margin:28px 0px 0px 19px;
    line-height:35px;
}
.login .forget-password:hover{
    color: #f00;
}
/*自定义状态类名*/
.show{
    display: block;
}
.hide{
    display: none;
}


js代码

'use strict';
angular.module("iMeet", [])
    .controller("loginCtrl", ['$scope', '$rootScope', '$compile', '$state', 'commonService', '$ocLazyLoad', function ($scope, $rootScope, $compile, $state, commonService) {
        $scope.usernameText = "";
        $scope.passwordText = "";
        $scope.hasFocus = true;
        $scope.isDisabled = false;
        $scope.isFull = false;
        //页面跳转后,将焦点定位到username 标签上
        angular.element("#username").focus();
        $scope.loginFn = function () {
            if ($scope.usernameText == "" || $scope.usernameText == "undefined") {
                //当用户名为空或undefined时,点击登录按钮,将焦点移到username输入框
                angular.element("#username").focus();
                return;
            } else if ($scope.passwordText == "" || $scope.passwordText == "undefined") {
                //当用户名输入信息后,点击按钮将焦点移到password输入框
                angular.element("#password").focus();
                return;
            } else {
                var usernameLength = angular.element('#username').val().length;
                var passwordLength = angular.element('#password').val().length;
                //console.log(usernameLength);
                //console.log(passwordLength);
                if ((usernameLength < 6 || usernameLength > 40) || (passwordLength < 8 || passwordLength > 50)) {
                    //当用户名和密码都输入信息但是只要有一个不满足格式就提示用户输入正确格式的信息
                    $scope.isFull = true;
                } else {
                    $scope.isFull = false;
                    commonService.getSyncData('/data/test.json', {
                        'username': $scope.username,
                        'password': $scope.password
                    }).then(function callSuccess(res) {
                        console.log(res);
                        //if (res.code == "200") {
                        //    angular.element(".login .form-horizontal .tip").removeClass('show').addClass('hide');
                        //    var resString = JSON.stringify(res);
                        //    sessionStorage.setItem("userInfo", resString);
                        //    $state.go('home', {});
                        //} else {
                        //    console.log("rrrrr");
                        //    angular.element(".login .form-horizontal .tip").removeClass('hide').addClass('show');
                        //    $scope.usernameText = "";
                        //    $scope.passwordText = "";
                        //}
                        if ($scope.usernameText == "supportcenter" && $scope.passwordText == "password") {
                            angular.element(".login .form-horizontal .tip").removeClass('show').addClass('hide');
                            var resString = JSON.stringify(res);
                            sessionStorage.setItem("userInfo", resString);
                            $state.go('home');
                        } else {
                            console.log("rrrrr");
                            angular.element(".login .form-horizontal .tip").removeClass('hide').addClass('show');
                            $scope.usernameText = "";
                            $scope.passwordText = "";
                        }
                    }, function callFail(err) {
                        console.log("loading json failed");
                    });
                }
            }
        };
        $scope.forgotPwdFn = function () {
            $state.go('forgetPassword');
        }
    }]);

json文件代码

{
  "status": "success",
  "code": "200",
  "userinfo": {
    "userid": "1123123",
    "name": "sdasd",
    "ismanage":"0",
    "usertype": "1",
    "systeminfo": [
      {
        "systemname": "",
        "systemcode": ""
      }
    ]
  }
}