简单的前端登录实现

最新推荐文章于 2024-02-19 16:04:08 发布

是君啊

最新推荐文章于 2024-02-19 16:04:08 发布

阅读量190

点赞数

分类专栏：前端HTML+css+JavaScript 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_67647150/article/details/132203160

版权

前端HTML+css+JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateForm(){
            var username = document.getElementById("username");
            var username_value=username.value
            var password = document.getElementById("password");
            var password_value=password.value
            var temp=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/
            if(username_value==null || username_value=="" || !temp.test(username_value)){
                alert('用户名未输入或用户名不符合要求')
            }else if(password_value==null || password_value=="" ||!temp.test(password_value)){
                alert('密码未输入或密码不符合要求')

            }else if(temp.test(username_value)&& temp.test(password_value)){
                alert('登录成功')
            }
        }
    </script>
</head>
<body>
    <form id="loginForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required /><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required /><br>
        <input type="button" value="提交" onclick="validateForm();" />
      </form>
</body>
</html>

代码解释：

在<script>标签中定义了一个名为validateForm()的JavaScript函数。该函数用于验证用户输入的用户名和密码是否符合要求，并弹出相应的提示框。
表单部分使用<form>标签定义，id属性为"loginForm"，该属性可以用于其他操作中。
在表单内部，使用<label>标签标注了用户名和密码的输入框，并且使用<input>标签创建了对应的输入框。其中，用户名输入框使用类型为"text"，密码输入框使用类型为"password"，并且都设置为必填字段，通过required属性来实现。
最后的<input>标签是一个提交按钮，在点击按钮时会调用validateForm()函数进行表单验证。