写一个表单验证(注意,形式任意,含有用户名、密码、邮箱的输入验证,必须要有对应文字说明和javascript部分即可)
时间: 2024-02-24 11:59:35 浏览: 62
javaScript 简单验证代码(用户名,密码,邮箱)
好的,以下是一个简单的表单验证示例:
```
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<span id="username-error" class="error-message"></span>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<span id="password-error" class="error-message"></span>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<span id="email-error" class="error-message"></span>
<input type="submit" value="提交">
</form>
<script>
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const emailInput = document.querySelector('#email');
const usernameError = document.querySelector('#username-error');
const passwordError = document.querySelector('#password-error');
const emailError = document.querySelector('#email-error');
form.addEventListener('submit', function(event) {
let isValid = true;
// 验证用户名
if (usernameInput.value.length < 6) {
usernameError.textContent = '用户名长度不能小于6位';
isValid = false;
} else {
usernameError.textContent = '';
}
// 验证密码
if (passwordInput.value.length < 8) {
passwordError.textContent = '密码长度不能小于8位';
isValid = false;
} else {
passwordError.textContent = '';
}
// 验证邮箱
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailError.textContent = '请输入有效的邮箱地址';
isValid = false;
} else {
emailError.textContent = '';
}
if (!isValid) {
event.preventDefault();
}
});
</script>
```
这个表单包含了三个输入框以及对应的错误提示信息。在 JavaScript 部分,我们给表单添加了一个 `submit` 事件监听器,当用户点击提交按钮时,会触发这个事件。在事件处理函数中,我们首先将 `isValid` 变量初始化为 `true`,表示表单合法。然后分别对用户名、密码、邮箱进行验证,如果不合法则将 `isValid` 设为 `false`,并在对应的错误提示元素中显示错误信息。最后,如果 `isValid` 为 `false`,则调用 `event.preventDefault()` 阻止表单提交。
阅读全文