简单的表单初始密码验证的实现-编程知识

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

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

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

运行效果

成功：