用户中心页面

最新推荐文章于 2022-01-30 09:49:52 发布

weixin_30838873

最新推荐文章于 2022-01-30 09:49:52 发布

阅读量1.4k

点赞数 2

文章标签： java 前端 ViewUI

原文链接：http://www.cnblogs.com/yingzi1028/p/7045171.html

版权

周末抽空给朋友做的页面嘻嘻，发出来大家一起来瞅瞅，欢迎吐槽哈哈哈哈

页面效果图：（小颖为了方便大家看到input框里我输入了什么所以把 input 的 type 由 password 改成了 text ）

密码规则：至少8个字符、至少一个大写字母、一个小写字母、一个数字、一个特殊字符。

代码：

方法一：缺点 if 判断太多了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .user-center {
            width: 600px;
            margin: 50px auto;
        }

        .user-password {
            margin-bottom: 15px;
        }

        label.user-text {
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        label.new {
            padding-left: 15px;
        }

        input.user-password {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }

        .error-message {
            display: none;
            color: #F44336;
            padding-left: 10px;
        }

        .btn {
            margin-top: 5px;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 1.42857143;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            margin: 0px 75px;
        }
    </style>
</head>

<body>
    <div class="user-center">
        <div class="user-password">
            <label class="user-text">原始密码：</label>
            <input type="password" id="oldPassword" class="user-password"></input>
            <span class="error-message" id="oldError">密码不正确，请重新输入！</span>
        </div>
        <div class="user-password">
            <label class="user-text new">新密码：</label>
            <input type="password" id="newPassword" class="user-password"></input>
            <span class="error-message" id="newError">密码格式不正确，请重新输入！</span>
        </div>
        <div class="user-password">
            <label class="user-text">确认密码：</label>
            <input type="password" id="againPassword" class="user-password"></input>
            <span class="error-message" id="againError">两次输入的密码不一致，请重新输入！</span>
        </div>
        <div class="user-password">
            <button id="btnPassword" class="btn btn-success">确认</button>
            <button id="btnCancel" class="btn btn-cancel">取消</button>
        </div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            var oldError = false;
            var newError = false;
            var againError = false;
            var ajaxPassword = "1234"; //这个值本应是从数据库里获取的
            $("#oldPassword").blur(function() {
                if ($("#oldPassword").val() != ajaxPassword) {
                    $("#oldError").text("密码不正确，请重新输入！");
                    $("#oldError").show();
                    oldError = true;
                } else {
                    oldError = false;
                    $("#oldError").hide();
                }
            });
            $("#newPassword").blur(function() {
                var str = $("#newPassword").val();
                if (str.length < 8 || !/[0-9]+/.test(str) || !/[A-Z]+/.test(str) || !/[a-z]+/.test(str) ||
                    !/[`!@#_\$%^&*()\{\};,.\?\/'"]/.test(str)) {
                    newError = true;
                    $("#newError").text("密码格式不正确，请重新输入！");
                    $("#newError").show();
                } else {
                    newError = false;
                    $("#newError").hide();
                }
            });
            $("#againPassword").blur(function() {
                var pwd1 = $("#newPassword").val();
                var pwd2 = $("#againPassword").val();
                if (pwd2 != pwd1) {
                    againError = true;
                    $("#againError").text("两次输入的密码不一致，请重新输入！");
                    $("#againError").show();
                } else {
                    againError = false;
                    $("#againError").hide();
                }
            });
            $("#btnPassword").click(function() {
                var pwd1 = $("#oldPassword").val();
                var pwd2 = $("#newPassword").val();
                var pwd3 = $("#againPassword").val();
                if (!pwd1) {
                    $("#oldError").text("密码不能为空！");
                    $("#oldError").show();
                } else if (oldError) {
                    $("#oldError").show();
                } else {
                    oldError = false;
                    $("#oldError").hide();
                }
                if (!pwd2) {
                    $("#newError").text("密码不能为空！");
                    $("#newError").show();
                } else if (newError) {
                    $("#newError").show();
                } else {
                    newError = false;
                    $("#newError").hide();
                }
                if (!pwd3) {
                    $("#againError").text("密码不能为空！");
                    $("#againError").show();
                } else if (againError) {
                    $("#againError").show();
                } else {
                    againError = false;
                    $("#againError").hide();
                }
                if (pwd1 && pwd2 && pwd3 && !oldError && !newError && !againError) {
                    console.log("访问数据库，保存新密码");
                }
            });
            $("#btnCancel").click(function() {
                var inputs = $("input");
                inputs.each(function() {
                    $(this).val(""); //遍历得到的每一个jquery对象
                });
            });
        });
    </script>
</body>

</html>

方法二：

    <script type="text/javascript">
        $(function() {
            var ajaxPassword = "1234"; //这个值本应是从数据库里获取的
            $("#oldPassword").blur(function() {
                if ($("#oldPassword").val() != ajaxPassword) {
                    $("#oldPassword").attr('name', true);
                    $("#oldError").text("密码不正确，请重新输入！");
                    $("#oldError").show();
                } else {
                    $("#oldError").hide();
                    $("#oldPassword").attr('name', false);
                }
            });
            $("#newPassword").blur(function() {
                var str = $("#newPassword").val();
                if (str.length < 8 || !/[0-9]+/.test(str) || !/[A-Z]+/.test(str) || !/[a-z]+/.test(str) ||
                    !/[`!@#_\$%^&*()\{\};,.\?\/'"]/.test(str)) {
                    $("#newPassword").attr('name', true);
                    $("#newError").text("密码格式不正确，请重新输入！");
                    $("#newError").show();
                } else {
                    $("#newPassword").attr('name', false);
                    $("#newError").hide();
                }
            });
            $("#againPassword").blur(function() {
                var pwd1 = $("#newPassword").val();
                var pwd2 = $("#againPassword").val();
                if (pwd2 != pwd1) {
                    $("#againPassword").attr('name', true);
                    $("#againError").text("两次输入的密码不一致，请重新输入！");
                    $("#againError").show();
                } else {
                    $("#againPassword").attr('name', false);
                    $("#againError").hide();
                }
            });
            $("#btnPassword").click(function() {
                var inputs = $("input");
                var pwd1 = $("#oldPassword").val();
                var pwd2 = $("#newPassword").val();
                var pwd3 = $("#againPassword").val();
                var name1 = $("#oldPassword").attr('name');
                var name2 = $("#newPassword").attr('name');
                var name3 = $("#againPassword").attr('name');
                inputs.each(function(index) {
                    if (!$(this).val()) {
                        $("span").eq(index).text("密码不能为空！");
                        $("span").eq(index).show();
                    } else if ($(this).attr('name') == "true") {
                        $("span").eq(index).show();
                    } else {
                        $("span").eq(index).hide();
                    }
                });
                if (pwd1 && pwd2 && pwd3 && name1 == "false" && name2 == "false" && name3 == "false") {
                    console.log("访问数据库，保存新密码");
                }
            });
            $("#btnCancel").click(function() {
                var inputs = $("input");
                inputs.each(function() {
                    $(this).val(""); //遍历得到的每一个jquery对象
                });
            });
        });
    </script>

转载于:https://www.cnblogs.com/yingzi1028/p/7045171.html