angularja修改密码

最新推荐文章于 2023-03-07 14:20:28 发布

原创最新推荐文章于 2023-03-07 14:20:28 发布 · 432 阅读

CC 4.0 BY-SA版权

本文介绍了一个基于AngularJS的用户管理系统中实现的密码修改功能。该系统通过前端JavaScript脚本实现了用户密码的安全修改流程，包括旧密码验证、新密码输入及确认等步骤。

<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 修改密码</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = example_data;

            // 显示修改密码表单
            $scope.showEditPwdBox = function ($index) {
                $scope.epwd_name = $scope.data[$index].name;
                $scope.epwd_index = $index;
                $scope.edit_pwd_box_is_show = true;
            };

            // 提交修改密码表单
            $scope.editPwd = function () {
                var user = $scope.data[$scope.epwd_index];

                if ($scope.epwd_old_password == undefined || $scope.epwd_old_password == "") {
                    alert("请输入旧密码！");
                    return;
                }

                if ($scope.epwd_password == undefined || $scope.epwd_password == "") {
                    alert("请输入新密码！");
                    return;
                }

                if ($scope.epwd_repassword == undefined || $scope.epwd_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.epwd_old_password != user.password) {
                    alert("旧密码不正确！");
                    return;
                }

                if ($scope.epwd_password != $scope.epwd_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                $scope.data[$scope.epwd_index].password = $scope.epwd_password; // 修改密码
                $scope.edit_pwd_box_is_show = false;
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button ng-click="showEditPwdBox($index)">修改密码</button>
        </td>
    </tr>
</table>

<div ng-show="edit_pwd_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="epwd_name" disabled/>
            </td>
        </tr>
        <tr>
            <td>
                旧密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_old_password"/>
            </td>
        </tr>
        <tr>
            <td>
                新密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="epwd_repassword"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="hidden" ng-model="epwd_index"/>
                <button ng-click="editPwd()">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>