修改密码html模板

于 2024-08-29 23:35:38 发布
阅读量415 收藏 14
点赞数 25
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45019897/article/details/141690894
版权

页面布局:
页面由两个主要部分组成：修改密码表单和注意事项提示。
修改密码表单位于左侧，占据了较大的空间；注意事项提示位于右侧，占据较小的空间。
修改密码表单:
包含三个输入字段：当前密码、新密码和确认新密码。
每个密码输入框旁边都有一个🔒图标按钮，用于切换密码显示状态（显示/隐藏密码）。
注意事项提示:
列出了密码设置的基本规则和注意事项，例如密码长度要求、密码复杂度等。
这些提示帮助用户了解如何设置一个安全的新密码。
模态窗口:
当用户尝试提交表单时，会显示一个模态窗口反馈结果。
如果密码不符合要求或输入不完整，将显示错误消息。
如果密码修改成功，则会显示成功消息。
表单验证:
JavaScript代码阻止用户提交空密码或不一致的新密码。
当用户提交表单时，如果发现密码输入有问题，会在模态窗口中显示相应的错误消息。
成功修改密码后，表单会被重置。
用户体验细节:
密码输入框支持实时显示和隐藏密码的功能，增强用户体验。
禁止通过Ctrl+C和Ctrl+V粘贴或复制密码输入框中的内容，以提高安全性。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            user-select:none;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .card {
            border: 1px solid #007bff;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            position: relative;
        }
        .card-content {
            padding: 30px;
        }
        h2 {
            margin-top: 0;
            color: #333;
            font-size: 26px;
            text-align: center;
        }
        .form-group {
            position: relative;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            color: #555;
            font-size: 16px;
        }
        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 12px; 
            border: 1px solid #ddd;
            border-radius: 50px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s;
            height: 40px; 
        }
        input[type="password"]:focus,
        input[type="text"]:focus {
            border-color: #007bff;
            outline: none;
        }
        button {
            background-color: #e0f0ff;
            color: #000;
            border: 1px solid #007bff;
            padding: 12px;
            font-weight: bold;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        button:hover {
            background-color: #87C4ED;
        }
        .note {
            font-size: 16px;
            color: #666;
            padding: 30px;
        }
        .note ul {
            padding-left: 0;
            list-style-type: none;
        }
        .note li {
            margin-bottom: 15px;
        }
        .card.modify-password {
            flex: 7;
        }
        .card.note {
            flex: 3;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #007bff;
            padding: 30px;
            text-align: center;
            max-width: 400px;
            width: 100%;
            height: 150px; 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content h3 {
            margin: 0;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 70%;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
            font-size: 26px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card modify-password">
            <div class="card-content">
                <h2>修改密码</h2>
                <form id="password-form">
                    <div class="form-group">
                        <label for="current-password">当前密码</label>
                        <input type="password" id="current-password" name="current-password" maxlength="20">
                        <span class="toggle-password" data-target="current-password">🔒</span>
                    </div>
                    <div class="form-group">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" name="new-password" maxlength="20">
                        <span class="toggle-password" data-target="new-password">🔒</span>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">确认新密码</label>
                        <input type="password" id="confirm-password" name="confirm-password" maxlength="20">
                        <span class="toggle-password" data-target="confirm-password">🔒</span>
                    </div>
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
        <div class="card note">
            <div class="card-content note">
                <h2>注意事项</h2>
                <ul>
                    <li>确保输入正确的当前密码。如果不正确，系统将无法验证你身份。</li>
                    <li>设置一个强密码，通常需要包含大写字母、小写字母、数字和特殊字符，长度最好在8位以上。</li>
                    <li>在“确认新密码”字段中重复输入新密码，以确保两次输入一致。</li>
                    <li>系统可能会提供实时反馈，例如新密码和确认密码是否一致，注意这些提示来调整密码设置。</li>
                    <li>在提交修改前，确认所有信息输入正确，以避免误操作。</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="modal" id="modal">
        <div class="modal-content">
            <h3 id="modal-message"></h3>
        </div>
    </div>

<script>
        document.getElementById('password-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const currentPassword = document.getElementById('current-password').value;
            const newPassword = document.getElementById('new-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            const modal = document.getElementById('modal');
            const modalMessage = document.getElementById('modal-message');
            if (!currentPassword || !newPassword || !confirmPassword) {
                modalMessage.textContent = '密码填写不完整，请检查所有字段。';
                modal.style.display = 'flex';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 3000);
                return;
            }
            if (newPassword !== confirmPassword) {
                modalMessage.textContent = '新密码与确认密码不匹配。';
                modal.style.display = 'flex';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 3000);
                return;
            }
            modalMessage.textContent = '密码修改成功！';
            modal.style.display = 'flex';
            setTimeout(() => {
                modal.style.display = 'none';
                document.getElementById('password-form').reset();
            }, 3000);
        });
        document.querySelectorAll('.toggle-password').forEach(toggle => {
            toggle.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetInput = document.getElementById(targetId);
                if (targetInput.type === 'password') {
                    targetInput.type = 'text';
                    this.textContent = '🔓'; 
                } else {
                    targetInput.type = 'password';
                    this.textContent = '🔒';
                }
                targetInput.addEventListener('input', function(event) {
                    const regex = /[\u4e00-\u9fa5]/;
                    const value = this.value;

                    if (regex.test(value)) {
                        this.value = value.replace(regex, '');
                    }
                });
                targetInput.addEventListener('keydown', function(event) {
                    if (event.ctrlKey && event.key === 'v') {
                        event.preventDefault(); 
                    }
                    if (event.ctrlKey && event.key === 'c') {
                        event.preventDefault(); 
                    }
                });
            });
        });
        document.querySelectorAll('input[type="password"], input[type="text"]').forEach(input => {
            input.addEventListener('keydown', function(event) {
                if (event.ctrlKey && event.key === 'v') {
                    event.preventDefault(); 
                }
                if (event.ctrlKey && event.key === 'c') {
                    event.preventDefault(); 
                }
            });
        });
    </script>
</body>
</html>
ネф̶-イω
关注
  • 25
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的修改密码
weixin_44547598的博客
05-26 1024
下面是修改密码的页面 ， 这里用的是bootstrap4的框架来搭建 这里呢点击button按钮（浏览） ， 弹出模态框显示所有的会员卡号 ，这里的会员卡号是与会员卡表内的数据相连接的 ，就是会员卡表内的数据有多少条 ，在模态框内就显示多少条 ，如果在会员卡表内删除一条数据，那么模态框内就要少显示一条数据 ，下面是点击浏览后调用的方法 ， 首先清空掉模态框内的所有数据 ，并将模态框显示出...
jq重置密码html模板,jQuery+ajax实现修改密码验证功能实例详解
weixin_35582180的博客
06-03 355
废话不多说了，直接给大家贴代码了，具体代码如下所示：//获取url中的参数$(function(){var userName = window.location.href;var aa = userName.indexOf("=");console.log(userName);if (aa == -1)return "";userName=userName.substring(aa+1);//给h...
修改登录密码html代码,html登录界面设置账号密码
weixin_39616003的博客
06-03 3717
html网页设计：一个简单的登录界面代码。用html代码编写一个简单的登陆界面登录 jsp作业 登录 登录到jsp作业 Email 密码 记住密码 登录 注册javascript html 设计一个登录界面注册页面代码： 注册 去登录 var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024); localDB....
html用户密码修改界面,16.设计和实现用户中心、修改密码功能
weixin_39867708的博客
06-03 3057
现在我们来设计一个用户中心的页面，显示用户相关的信息，由于我们的Q&A demo比较简单，所以显示的内容也不用太多，我们来显示用户的头像、注册时间、发表的问题数和评论数，设计一个user.html，界面如下：用户的头像或其他信息都可以通过上下文管理器返回的login_user去获取，发布问答和评论数直接在模板里使用length过滤器，之前的文章都有类似的部分。这个页面通过点击导航条的用户进...
一个重置密码html示例
林
06-10 1075
<style type="text/css"> .formblock { display: inline-block; padding: 0px 6px; min-width: 300px; border: solid 1px #000; background-color: #ccc; } .formblock input {margin-bottom: 10px; } </style&
HTML模板可供修改
12-12
在这个"HTML模板可供修改"的资源中，用户可以自由地调整和个性化模板以适应他们的项目。这涉及到对HTML代码的理解，以及如何通过编辑标签来改变页面元素的样式和行为。HTML标签定义了网页的各个部分，如`<head>`用于...
HTML5手机登录密码设置页面模板
05-01
HTML5手机登录密码设置页面模板是为移动设备设计的一个网页界面，主要应用于用户在手机上进行账户的安全登录或密码修改。这个模板利用了HTML5的新特性，提供了更加友好的用户体验和增强的功能，同时结合了jQuery库，...
弹出层登录注册找回密码网页html模板
12-04
标题"弹出层登录注册找回密码网页html模板"表明这是一个专门用于构建登录、注册和找回密码功能的HTML模板。在网页设计中，弹出层（也称为模态窗口）是一种常见的交互设计元素，它可以在用户浏览主页面时弹出一个窗口...
html5手机密码设置页面模板
10-29
HTML5手机密码设置页面模板是用于创建移动设备上安全、用户友好的密码输入界面的一种设计。这个模板利用了HTML5的新特性和语义化元素，旨在提供更好的用户体验和更强的数据验证功能。以下是对该模板中涉及的主要知识...
登录界面、找回密码界面、修改密码界面的源代码
09-05
登录界面、找回密码界面、修改密码界面的源代码。 在制作过程中，有使用CSS、JS、Jquery。其中还有cookie、base64的js插件。 每一次刷新登录页面都可以自动刷新验证码。 提供的源代码仅供参考，如有不足，请多多指教...
HTML DOM 对象
lly202406的博客
08-23 453
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
html快速入门
m0_52049533的博客
08-22 632
/
Java学习Day33：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 879
JS语句;
【React】React事件和HTML事件的区别
owo_ovo的博客
08-23 666
【React】React事件和HTML事件的区别
Vue: v-html安全性问题
q1003675852的博客
08-22 597
本文主要记录了Vue: v-html安全性问题及其解决方案。
传统前端入门 HTML
2301_78270736的博客
08-24 732
HTML（HyperText Markup Language）是一种标记语言，用于创建和结构化网页及其内容。它是构建网页的基础标准语言。
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
最新发布
2301_78945238的博客
08-28 174
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
HTML实现俄罗斯方块
m0_65134936的博客
08-21 869
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 3332
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
修改密码html模板代码
06-12
在HTML中创建一个密码修改模板，通常涉及到表单元素的设计，包括输入框（让用户输入旧密码和新密码），提交按钮，以及可能的错误提示。以下是一个简单的密码修改表单的HTML代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Password Reset Form</title> </head> <body> <h2>Reset Password</h2> <form id="reset-password" action="/api/password-reset" method="POST"> <div class="form-group"> <label for="old-password">Old Password:</label> <input type="password" id="old-password" name="old_password" required> <span class="error-message hidden">Invalid old password</span> </div> <div class="form-group"> <label for="new-password">New Password:</label> <input type="password" id="new-password" name="new_password" required> <span class="error-message hidden">Password is too short</span> </div> <div class="form-group"> <label for="confirm-password">Confirm Password:</label> <input type="password" id="confirm-password" name="confirm_password" required> <span class="error-message hidden">Passwords do not match</span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <script> // Add client-side validation using JavaScript (not shown) </script> </body> </html> ``` 在这个例子中： - `<form>`标签定义了表单，`action`属性指定了密码修改的后端处理地址，`method="POST"`表示使用HTTP POST方法发送数据。 - `input`标签用于密码输入，`type="password"`隐藏输入内容，`required`属性确保用户输入不为空。 - `.error-message`和`.hidden`用于显示和隐藏错误信息。 - `button`标签定义提交按钮。 相关问题： 1. 如何在服务器端验证密码？ 2. 是否需要在前端进行密码强度检查？ 3. 如何处理用户成功或失败的密码修改请求？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值