创建一个网站登录表单,要求通过编写JavaScript 脚本对表单数据进行验证,若未输入用户名或密码,则阻止提交表单并显示提示信息。以及运行结果
时间: 2024-02-22 16:55:27 浏览: 28
好的,我可以帮你解答这个问题。这里提供一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form id="loginForm" onsubmit="return validateForm()">
<label>Username:</label>
<input type="text" id="username" name="username">
<br>
<label>Password:</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">Login</button>
</form>
<p id="errorMsg" style="color:red; display:none;">Please enter both username and password.</p>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
document.getElementById("errorMsg").style.display = "block";
return false;
}
return true;
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个登录表单,其中包含一个用户名输入框、一个密码输入框以及一个提交按钮。在表单提交时,我们调用了`validateForm()`函数,该函数会获取用户名和密码的值,并检查它们是否为空。如果任何一个输入框为空,那么我们会显示一个错误消息,并阻止表单提交。否则,表单会被提交。
你可以将这段代码复制到一个HTML文件中并在浏览器中打开,然后尝试输入不同的用户名和密码,看看会发生什么。
希望这个示例能对你有所帮助!