编写一个html文件,对示例表单中的用户名和密码进行非空、长度范围以及密码和确认密码必须相等有效性校验
时间: 2023-11-22 11:53:10 浏览: 84
验证表单密码
以下是一个简单的 HTML 表单,用于输入用户名和密码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单验证示例</title>
</head>
<body>
<form onsubmit="return validateForm()" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirm_password = document.getElementById("confirm_password").value;
if (username == "") {
alert("用户名不能为空!");
return false;
}
if (username.length < 6 || username.length > 16) {
alert("用户名长度必须在 6 到 16 个字符之间!");
return false;
}
if (password == "") {
alert("密码不能为空!");
return false;
}
if (password.length < 6 || password.length > 16) {
alert("密码长度必须在 6 到 16 个字符之间!");
return false;
}
if (password != confirm_password) {
alert("密码和确认密码必须相等!");
return false;
}
return true;
}
</script>
</body>
</html>
```
在这个示例中,我们通过 JavaScript 编写了一个 `validateForm` 函数,用于在表单提交时校验数据的有效性。该函数首先获取用户名、密码和确认密码的值,然后依次进行以下校验:
1. 用户名不能为空。
2. 用户名的长度必须在 6 到 16 个字符之间。
3. 密码不能为空。
4. 密码的长度必须在 6 到 16 个字符之间。
5. 密码和确认密码必须相等。
如果任何一项校验失败,函数会弹出一个提示框并返回 `false`,阻止表单提交。否则,函数会返回 `true`,表单可以正常提交。
阅读全文