写一个登录表单js验证
时间: 2023-10-10 20:15:09 浏览: 36
好的,以下是一个简单的登录表单js验证:
HTML代码:
```
<form id="login-form">
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<button type="submit">登录</button>
</form>
```
JavaScript代码:
```
const form = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 防止表单默认提交行为
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
if (!username) {
alert('请输入用户名');
return;
}
if (!password) {
alert('请输入密码');
return;
}
// 这里可以通过 Ajax 发送登录请求,并根据返回结果进行相应处理
});
```
该代码会在用户点击登录按钮时触发表单的 submit 事件,然后获取用户名和密码输入框的值,并进行非空验证。如果用户名或密码为空,则弹出提示框。如果都不为空,则可以通过 Ajax 发送登录请求。