目录
1.3.1先把css部分链接到index.html中,注意链接的地址。
1.4.1 先把js部分链接到index.html中,注意链接的地址。
简单示例:表单初始密码验证
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("登录成功!千里之行,始于足下!");
// 如果通过验证,可以在这里执行其他操作或提交表单
});
运行效果
成功:
失败:
总结:
本示例是一个简单的表单初始密码验证的实现。用户在表单中输入用户名和密码后,通过JavaScript脚本验证用户名和密码的正确性,如果输入的用户名不符合要求或密码不正确,则会弹出相应的错误提示;如果用户名和密码都符合要求,则会弹出登录成功的提示。
在HTML部分,使用了一个form标签来包裹用户名和密码的输入框,使用了required属性来指定这两个输入框为必填项。
在CSS部分,定义了输入框和提交按钮的样式。
在JavaScript部分,使用了querySelector方法获取用户名和密码输入框的值,使用提交事件监听器来监听表单的提交事件。然后判断用户名和密码的正确性,并根据结果弹出相应的提示。
通过这个示例可以初步了解表单的使用和JavaScript的事件监听及条件判断的应用。