用html做登录页面用JS实现当输入Email或密码为空时提示用户,Email格式不符时提示用户提示方式不限,可以使用弹窗,文字、按键禁用等方式
时间: 2024-03-22 12:38:50 浏览: 17
好的,我可以帮你解答这个问题。
首先,你需要在 HTML 中创建一个表单,其中包含 Email 和密码输入框,以及一个提交按钮,如下所示:
```html
<form id="login-form">
<label>Email:</label>
<input type="email" name="email" required>
<br>
<label>Password:</label>
<input type="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
```
其中,`type="email"` 属性会自动验证输入的 Email 格式是否正确,而 `required` 属性会确保输入框不为空。
接下来,你可以使用 JavaScript 监听表单提交事件,并在提交前检查输入框的值是否符合要求。代码如下:
```javascript
const form = document.getElementById("login-form");
form.addEventListener("submit", function(event) {
const emailInput = document.getElementsByName("email")[0];
const passwordInput = document.getElementsByName("password")[0];
if (emailInput.validity.valueMissing) {
alert("Please enter your email.");
event.preventDefault();
return;
}
if (emailInput.validity.typeMismatch) {
alert("Please enter a valid email address.");
event.preventDefault();
return;
}
if (passwordInput.validity.valueMissing) {
alert("Please enter your password.");
event.preventDefault();
return;
}
});
```
在上述代码中,我们首先获取 Email 和密码输入框的值。然后,我们使用 `validity` 属性检查输入框的值是否为空或格式不正确。如果出现错误,我们就使用 `alert` 函数弹出提示框,并使用 `event.preventDefault()` 阻止表单提交。
最后,你可以在 `alert` 函数之后添加任何其他代码,例如将提交按钮禁用等。
希望这个回答能够帮到你。