请编写一段html代码,实现表单中的用户名和密码进行非空、长度范围以及密码和确认密码必须相等有效性校验
时间: 2023-12-03 18:47:20 浏览: 18
以下是一个简单的实现:
```html
<form onsubmit="return validateForm()">
<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="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
var username = document.forms[0]["username"].value;
var password = document.forms[0]["password"].value;
var confirmPassword = document.forms[0]["confirmPassword"].value;
var error = "";
if (username == "") {
error += "用户名不能为空\n";
}
if (password == "") {
error += "密码不能为空\n";
}
if (confirmPassword == "") {
error += "确认密码不能为空\n";
}
if (password.length < 6 || password.length > 20) {
error += "密码长度必须在6到20个字符之间\n";
}
if (password != confirmPassword) {
error += "密码和确认密码不相等\n";
}
if (error != "") {
alert(error);
return false;
}
return true;
}
</script>
```
这个表单中有三个输入框,分别是用户名、密码和确认密码。在 `validateForm()` 函数中,我们获取了这三个输入框的值,并进行了一系列的校验。首先,我们判断这三个值是否为空,如果为空则输出错误信息。其次,我们判断密码长度是否在6到20个字符之间,如果不是则输出错误信息。最后,我们判断密码和确认密码是否相等,如果不相等则输出错误信息。如果所有校验都通过,则返回 `true`,否则返回 `false`。在表单的 `onsubmit` 事件中调用 `validateForm()` 函数,如果返回值是 `true` 则表示表单可以提交,否则表示校验不通过,表单不会提交。