简单的表单初始密码验证的实现

news2024/12/24 10:05:52

简单示例：表单初始密码验证

1.1准备工作(图1）

1.2 index部分

1.3 css部分

1.3.1先把css部分链接到index.html中，注意链接的地址。

1.3.2添加样式

1.4 JS部分

1.4.1 先把js部分链接到index.html中，注意链接的地址。

1.4.3 添加JS

总结：

简单示例：表单初始密码验证

1.1准备工作(图1）

(1)创建文件夹test。

(2)在test文件夹里面有index,css,js三个文件夹。

(3)在index文件夹里创建名为index.html, 用来存放.html格式的文件。

(4)在css文件夹里创建名为style.css, 用来存放.css格式的文件。

(4)在js文件夹里创建名为form.js, 用来存放.js格式的文件。

图1

1.2 index部分

点击打开index文件夹下名为index.html的文件输入代码到index.html文件中如图2所示

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <form action="" method="POST">
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
</html>

图2

1.3 css部分

1.3.1先把css部分链接到index.html中，注意链接的地址。

增加代码到index.html中修改如下：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
     <link rel="stylesheet" href="../css/style.css"><!--增加的代码 -->
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <form action="" method="POST">
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
</html>

1.3.2添加样式

点击打开css文件夹下名为style.css的文件，输入代码到style.css中。

input[type="text"],
input[type="password"],
input[type="submit"] {
    background-color: #f2f2f2;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

ctrl+s保存，打开index.html，F5打开，查看所设置的样式效果（图3)

图3

1.4 JS部分

1.4.1 先把js部分链接到index.html中，注意链接的地址。

增加代码到index.html中修改如下：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
     <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <form action="" method="POST">
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
    <script src="../js/form.js"></script><!--增加的代码-->
</body>
</html>

1.4.3 添加JS

本实例初始Username为知识就是力量，密码为Knowledgeispower.并规定Username字符数不能小于6位大于8位，密码输出错误报错，

如果登录成功输出千里之行，始于足下！

输入以下javaScript代码

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  var username = document.querySelector('input[name="username"]').value;
  var password = document.querySelector('input[name="password"]').value;

  if (username.length < 6 || username.length > 8) {
    alert("用户名必须在6到8个字符之间。");
    return;
  }

  if (password !== "Knowledgeispower") {
    alert("密码不正确。");
    return;
  }

  alert("登录成功！千里之行，始于足下！");
  // 如果通过验证，可以在这里执行其他操作或提交表单
});

运行效果

成功：