通过script完成一个表单验证 (1)用户名:不能少于5个字符,只能使用英文、数字、下划线 (2)密码:不能少于8个字符,只能使用英文、数字 (3)重复密码:和密码一致 要求在表单项失去焦点时进行单项检验,提交时对整个表单进行检验
时间: 2024-05-14 11:12:22 浏览: 8
HTML代码:
```
<form id="myForm" action="#" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="password2">重复密码:</label>
<input type="password" id="password2" name="password2"><br>
<input type="submit" value="提交">
</form>
```
JavaScript代码:
```javascript
// 单项验证函数
function validate(input, pattern, msg) {
var value = input.value.trim();
if (pattern.test(value)) {
input.classList.remove("invalid");
input.nextElementSibling.innerHTML = "";
return true;
} else {
input.classList.add("invalid");
input.nextElementSibling.innerHTML = msg;
return false;
}
}
// 用户名验证
var usernameInput = document.getElementById("username");
usernameInput.addEventListener("blur", function() {
var pattern = /^\w{5,}$/;
var msg = "用户名不能少于5个字符,只能使用英文、数字、下划线";
validate(this, pattern, msg);
});
// 密码验证
var passwordInput = document.getElementById("password");
passwordInput.addEventListener("blur", function() {
var pattern = /^\w{8,}$/;
var msg = "密码不能少于8个字符,只能使用英文、数字";
validate(this, pattern, msg);
});
// 重复密码验证
var password2Input = document.getElementById("password2");
password2Input.addEventListener("blur", function() {
var password = passwordInput.value.trim();
var value = this.value.trim();
if (value === password) {
this.classList.remove("invalid");
this.nextElementSibling.innerHTML = "";
return true;
} else {
this.classList.add("invalid");
this.nextElementSibling.innerHTML = "重复密码和密码不一致";
return false;
}
});
// 表单提交验证
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event) {
var valid = true;
var inputs = this.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checkValidity()) {
valid = false;
break;
}
}
if (!valid) {
event.preventDefault();
}
});
```
CSS代码:
```css
input.invalid {
border-color: red;
}
input + span {
color: red;
}
```