前端小案例——登录界面（正则验证, 附源码）
花花´◡` 2024-07-10 11:03:01 阅读 58
一、前言
实现功能：
提供用户名和密码输入框。当用户提交表单时，阻止默认提交行为。使用正则表达式验证用户输入的内容，判断输入的是有效的邮箱地址还是身份证号码。根据验证结果，在输入框下方显示相应的提示信息。
实现逻辑：
当页面加载完成后，通过 <code>document.addEventListener("DOMContentLoaded", function () { ... }); 来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。
获取表单元素 .form 并监听其提交事件 form.addEventListener("submit", function (event) { ... });。
在表单提交事件中，首先阻止默认的表单提交行为 event.preventDefault();，以便在验证用户输入后自行处理提交逻辑。
获取用户名输入框元素 userinput 和用于显示验证信息的元素 eer。
定义了两个正则表达式：emailRegex 用于验证邮箱地址，idCardRegex 用于验证身份证号码。
判断用户输入的内容是否符合邮箱地址或身份证号码的格式：
如果是有效的邮箱地址，则在 eer 元素中显示 "有效的邮箱地址"。如果是有效的身份证号码，则在 eer 元素中显示 "有效的身份证号码"。如果都不符合，则在 eer 元素中显示 "请输入有效的邮箱地址或身份证号码"。
最后，根据验证结果，在页面上显示相应的提示信息。
二、项目运行效果
三、全部代码
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>登录</title>
<style>
.form {
max-width: 350px;
display: flex;
flex-direction: column;
gap: 20px;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.4em;
background-color: rgb(249, 196, 196);
border-radius: 25px;
transition: .4s ease-in-out;
margin: 200px auto;
}
#heading {
text-align: center;
margin: 2em;
color: rgb(255, 255, 255);
font-size: 1.2em;
}
.field {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
border-radius: 25px;
padding: 0.6em;
border: none;
outline: none;
color: white;
background-color: #383737;
box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}
.input-icon {
height: 1.3em;
width: 1.3em;
fill: white;
}
.input-field {
background: none;
border: none;
outline: none;
width: 100%;
height: 30px;
color: #d3d3d3;
}
.form .btn {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 2.5em;
padding-bottom: 50px;
}
.button1 {
padding: 0.5em;
padding-left: 1.1em;
padding-right: 1.1em;
border-radius: 5px;
margin-right: 0.5em;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.button1:hover {
background-color: black;
color: white;
}
.button2 {
padding: 0.5em;
padding-left: 2.3em;
padding-right: 2.3em;
border-radius: 5px;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
margin-bottom: 3em;
padding: 0.5em;
border-radius: 5px;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.eer{
margin-top: -18px;
margin-left: 20px;
width: 80%;
height: 20px;
border: none;
background-color: transparent;
color: #333;
}
</style>
</head>
<body>
<form class="form">code>
<p id="heading">Login</p>code>
<div class="field">code>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"code>
viewBox="0 0 16 16">code>
<path
d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z">code>
</path>
</svg>
<input placeholder="Username" class="input-field" id="user" type="text" >code>
</div>
<input type="text" class="eer" disabled value="">code>
<div class="field">code>
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"code>
viewBox="0 0 16 16">code>
<path
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z">code>
</path>
</svg>
<input placeholder="Password" class="input-field" type="password" >code>
</div>
<div class="btn">code>
<button class="button1">Login</button>code>
<button class="button2">Sign Up</button>code>
</div>
</form>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector(".form");
form.addEventListener("submit", function (event) {
event.preventDefault(); // 阻止表单默认提交行为
const userinput = document.querySelector("#user");
const value = userinput.value;
const eer = document.querySelector('.eer');
console.log(eer);
// 电子邮件正则表达式
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
// 身份证号码正则表达式
const idCardRegex = /^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X)$/i;
if (emailRegex.test(value)) {
eer.value = '有效的邮箱地址';
} else if (idCardRegex.test(value)) {
eer.value = '有效的身份证号码';
} else {
// userinput.value = "";
eer.value = "请输入有效的邮箱地址或身份证号码";
}
});
});
</script>
</html>
四、答疑解惑
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。
还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。
博主VX：18884281851
谢谢各位的支持~~
上一篇： LLaMA Factory+ModelScope实战——使用 Web UI 进行监督微调
下一篇： Hololens2远程音视频通话与AR远程空间标注，基于OpenXR+MRTK3+WebRTC实现
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。