前端小案例——登录界面（正则验证, 附源码）

一、前言

实现功能：

1. 提供用户名和密码输入框。
2. 当用户提交表单时，阻止默认提交行为。
3. 使用正则表达式验证用户输入的内容，判断输入的是有效的邮箱地址还是身份证号码。
4. 根据验证结果，在输入框下方显示相应的提示信息。

实现逻辑：

1. 当页面加载完成后，通过 document.addEventListener("DOMContentLoaded", function () { ... }); 来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。

2. 获取表单元素 .form 并监听其提交事件 form.addEventListener("submit", function (event) { ... });。

3. 在表单提交事件中，首先阻止默认的表单提交行为 event.preventDefault();，以便在验证用户输入后自行处理提交逻辑。

4. 获取用户名输入框元素 userinput 和用于显示验证信息的元素 eer。

5. 定义了两个正则表达式：emailRegex 用于验证邮箱地址，idCardRegex 用于验证身份证号码。

6. 判断用户输入的内容是否符合邮箱地址或身份证号码的格式：

   • 如果是有效的邮箱地址，则在 eer 元素中显示 “有效的邮箱地址”。
   • 如果是有效的身份证号码，则在 eer 元素中显示 “有效的身份证号码”。
   • 如果都不符合，则在 eer 元素中显示 “请输入有效的邮箱地址或身份证号码”。

7. 最后，根据验证结果，在页面上显示相应的提示信息。

二、项目运行效果

三、全部代码

    
    
    
    
        .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;
        }

    


    
        
Login
        
            
                
                
            
            
        
        
        
            
                
                
            
            
        
        
            Login
            Sign Up
        
    

四、答疑解惑

 这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。

        还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：18884281851

谢谢各位的支持~~