用form 实现一个用户登录窗体,有文本框,密码框,登录按钮和重置按钮组成。用javascript脚本来实现判断用户名和密码是否为空
时间: 2024-10-03 18:04:05 浏览: 20
当创建一个简单的用户登录表单时,可以使用HTML结构来设计界面,并结合JavaScript来处理输入验证。以下是一个基本示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<form id="loginForm" onsubmit="return validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>
<script>
function validateForm() {
// 获取输入框的值
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 判断用户名和密码是否为空
if (username === '' || password === '') {
alert("请输入完整的用户名和密码!");
return false; // 阻止表单提交,显示错误提示
}
// 如果验证通过,返回true让表单正常提交
return true;
}
</script>
</body>
</html>
```
在这个例子中,`validateForm()`函数会在用户点击登录按钮时被触发。如果用户名或密码输入框为空,它会阻止表单提交并弹出一个警告对话框。
阅读全文