开发一个密码修改表单界面，监听表单提交事件，当提交表单时完成3种检查：检查旧密码字符个数是否符合6~12，否则在旧密码输入框后面提示“密码长度有误”；检查新密码和确认密码是否一致，如果不一致则在确认密码的输入框下面以红色字体提示“密码不一致”；新密码必须包含数字、字母和特殊符号检查新密码是否含有数字、字母和特殊符号，如果没有就在新密码输入框下提示“密码必须包括数字、字母和特殊符号”;并在提交表单后在控制台显示旧密码，新密码和确认密码

时间: 2024-02-03 20:15:45 浏览: 92

FormWithRegexp:检查电子邮件是否正确、密码是否至少有 8 个字符（1 个大写字母、1 个最小字母、1 个数字）以及密码是否匹配的表单

在IT行业中，网页开发是至关重要的一个领域，而HTML（超文本标记语言）则是构建网页的基础。本项目名为"FormWithRegexp"，其主要功能是实现一个表单，用于验证用户输入的电子邮件地址和密码是否符合特定的要求。在这个表单中，电子邮件地址必须是合法的格式，而密码则需要满足一定的复杂性规则。 1. **电子邮件验证**： - 在HTML表单中，通常使用`<input>`标签来收集用户输入。对于电子邮件验证，可以设置`type="email"`属性，这样浏览器会自动提供一些基本的验证，如检查是否包含`@`符号和`.`。 - 正则表达式是更高级的验证方式，可以在服务器端或客户端JavaScript中进行。例如，可以使用如`^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$`这样的正则表达式，确保电子邮件格式正确。 2. **密码验证**： - 密码通常用`type="password"`的`<input>`标签收集。为了满足本项目要求，密码必须至少包含8个字符，1个大写字母，1个小写字母和1个数字。这可以通过JavaScript的正则表达式进行验证。 - 一个示例正则表达式可能为：`^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$`。这个表达式确保了至少一个大写字母、一个小写字母、一个数字，并且至少8个字符长度。 3. **表单验证**： - 表单验证可以分为客户端验证（在浏览器中进行，通过JavaScript）和服务器端验证（在服务器处理表单提交后进行）。客户端验证提供即时反馈，但不应替代服务器端验证，因为客户端验证可以被绕过。 - 对于密码匹配，通常会有两个`<input>`标签，一个是`password`，另一个是`confirm_password`。通过比较这两个字段的值，确保它们相等。 4. **JavaScript验证**： - JavaScript可以用来添加额外的验证逻辑，如在用户输入时实时检查电子邮件格式或密码复杂性，并显示错误消息。 - 使用`addEventListener('input', validateInput)`可以监听用户的输入，然后调用`validateInput`函数进行验证。 - 验证失败时，可以使用`setCustomValidity`方法设置自定义错误消息，用户提交表单时会显示这些消息。 5. **HTML表单元素**： - `<form>`标签用于创建表单，可以指定`action`属性指向处理表单数据的服务器端脚本，`method`属性指明提交方式（通常是`GET`或`POST`）。 - `<label>`与`<input>`配合使用，提高表单的可读性和可用性。 - `<input type="submit">`用于提交表单，`<input type="reset">`可以清除表单内容。 - `<span>`或`<div>`可以用来显示验证错误信息。 6. **响应式设计**： - 考虑到不同设备的屏幕尺寸，可以使用CSS媒体查询（Media Queries）和Flexbox或Grid布局，使表单在各种设备上都有良好的显示效果。在这个"FormWithRegexp-main"的项目中，开发者可能还包含了相关的CSS文件（如style.css）用于样式设计，以及JavaScript文件（如script.js）用于实现上述的验证逻辑。通过这些技术的结合，可以创建出一个既安全又用户体验良好的表单验证系统。

这是一个基于 HTML 和 JavaScript 实现的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改密码</title> </head> <body> <h1>修改密码</h1> <form id="password-form"> <div> <label for="old-password">旧密码：</label> <input type="password" id="old-password" required minlength="6" maxlength="12"> <span id="old-password-error" style="color: red;"></span> </div> <div> <label for="new-password">新密码：</label> <input type="password" id="new-password" required> <span id="new-password-error" style="color: red;"></span> </div> <div> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" required> <span id="confirm-password-error" style="color: red;"></span> </div> <button type="submit">提交</button> </form> <script> const passwordForm = document.querySelector('#password-form'); const oldPasswordInput = document.querySelector('#old-password'); const oldPasswordError = document.querySelector('#old-password-error'); const newPasswordInput = document.querySelector('#new-password'); const newPasswordError = document.querySelector('#new-password-error'); const confirmPasswordInput = document.querySelector('#confirm-password'); const confirmPasswordError = document.querySelector('#confirm-password-error'); passwordForm.addEventListener('submit', (event) => { event.preventDefault(); const oldPassword = oldPasswordInput.value; const newPassword = newPasswordInput.value; const confirmPassword = confirmPasswordInput.value; // 检查旧密码长度 if (oldPassword.length < 6 || oldPassword.length > 12) { oldPasswordError.textContent = '密码长度有误'; } else { oldPasswordError.textContent = ''; } // 检查新密码和确认密码是否一致 if (newPassword !== confirmPassword) { confirmPasswordError.textContent = '密码不一致'; } else { confirmPasswordError.textContent = ''; } // 检查新密码是否包含数字、字母和特殊符号 if (!/\d/.test(newPassword) || !/[a-zA-Z]/.test(newPassword) || !/[^a-zA-Z0-9]/.test(newPassword)) { newPasswordError.textContent = '密码必须包括数字、字母和特殊符号'; } else { newPasswordError.textContent = ''; } if (oldPasswordError.textContent === '' && confirmPasswordError.textContent === '' && newPasswordError.textContent === '') { console.log('旧密码：', oldPassword); console.log('新密码：', newPassword); console.log('确认密码：', confirmPassword); passwordForm.reset(); } }); </script> </body> </html> ``` 在表单提交事件处理函数中，我们先从输入框中获取旧密码、新密码和确认密码的值，然后分别完成三种检查。如果某种检查不通过，则在对应的错误提示元素中显示错误信息；否则清空错误信息。最后，如果三种检查都通过，则在控制台中显示旧密码、新密码和确认密码，并重置表单。

阅读全文

相关推荐

Swift 日期选择 地址选择 表单提交数据 textView

使用layer弹窗提交表单时判断表单是否输入为空的例子

XML作业二-第五题编写一个表单，对用户输入的用户名、口令进行检查，用户输入的密码应当超过10个字符

JavaScript event（事件） 字符串长度控制及Form表单提交控制

表单输入一定长度的字符然后自动提交

JavaScript表单验证全集：邮箱、数字、字符检查

JavaScript表单验证全攻略：控制提交与正则检查

JavaScript表单验证全集：字符串、数字、邮箱、汉字等

JavaScript实时表单验证教程：用户名与密码规则检查

本实例以一个简单的用户注册表单为依托，用户填写完用户名和密码，鼠标单击注册按钮后执行单击事件处理函数，对用户名和密码进行长度检查，只要有一项不符合要求则给出错误提示，并阻止提交。js

当表单提交时将空字符串转换为null

form表单提交返回值是void 如何监听

在form表单中校验密码必须包含字母、数字和特殊字符，且密码不能包含连续数字

航空公司客户满意度数据转换与预测分析Power BI案例研究

最新推荐

JS判断form内所有表单是否为空的简单实例

使用form-create动态生成vue自定义组件和嵌套表单组件

Vue表单验证插件Vue Validator使用方法详解

航空公司客户满意度数据转换与预测分析Power BI案例研究

SSM Java项目：StudentInfo 数据管理与可视化分析

管理建模和仿真的文件

负载均衡技术深入解析：确保高可用性的网络服务策略

怎么解决头文件重复包含

pyedgar：Python库简化EDGAR数据交互与文档下载

"互动学习：行动中的多样性与论文攻读经历"

Swift 日期选择地址选择表单提交数据 textView

JavaScript event（事件）字符串长度控制及Form表单提交控制