dom - 如何使用 J-script 解决此网页登录问题?
问题描述
我对 Dom 操作编码不是很精通,我正在尝试解决以下问题:
以下登录页面有 3 个不同的条目,用户名电子邮件和密码。我想添加/更改以下内容,但不知道该怎么做。
当前的代码检查每个输入是否为 10 个字符或更少 - 更改它,使电子邮件的长度必须为 20 个字符
密码长度必须超过 8 个字符,用户名
长度必须超过 11 个字符检查电子邮件是否包含 @ 符号
检查密码至少包含 1 个数字、1 个字符和 1 个
特殊字符每个输入字段显示不同的错误消息,以向用户显示
输入无效的原因
这是代码::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
div {
margin: 25px;
}
label {
display: block;
}
.container {
width: 300px;
margin: auto;
}
button {
display: inherit !important;
margin: auto !important;
}
</style>
<body>
<div class="container">
<div>
<label for="">Username</label><input type="text" id="Username" />
<div id="userInfo"></div>
</div>
<div>
<label for="">Email</label><input type="text" id="email" />
<div id="emailInfo"></div>
</div>
<div>
<label for="">Password</label><input type="text" id="password" />
<div id="passwordInfo"></div>
</div>
</div>
</body>
</html>
<script>
let appData = {
username: null,
usernameMessage: "Username is too short",
email: null,
emailMessage: "Email too short",
password: null,
passwordMessage: "Password too short",
};
document.addEventListener("input", (event) => {
appData[event.target.id] = event.target.value;
if (
appData[event.target.id].length > 0 &&
appData[event.target.id].length < 20
) {
document.getElementById(event.target.id + "Info").innerText =
appData[event.target.id + "Message"];
} else {
document.getElementById(event.target.id + "Info").innerText = "";
}
});
</script>
解决方案
推荐阅读
- javascript - 与另一个视图重叠按钮
- python-3.x - 如何检查某个任务是否正在运行?
- scala - 如何编译器找到正确的隐式?
- java - Corda 项目设置:无法找到请求目标的有效认证路径
- flutter - 在颤振中共享列表视图?
- flutter - 如何检查手机中是否已经设置了指纹的生物特征
- laravel - Laravel 7无法在生产环境中找到组件的类或视图
- python - 如何使用分类和非分类特征进行回归
- artificial-intelligence - Watson Visual Recognition 出错,无法进行训练
- r - 用 curly-curly 改变变量