请编写一段html代码,实现表单中的用户名和密码进行非空、长度范围以及密码和确认密码必须相等有效性校验
时间: 2023-12-03 09:47:14 浏览: 27
以下是一个简单的HTML表单代码,实现了用户名和密码的非空、长度范围以及密码和确认密码必须相等的有效性校验:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单校验</title>
<script type="text/javascript">
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
var confirm_password = document.forms["myForm"]["confirm_password"].value;
if (username == "" || password == "" || confirm_password == "") {
alert("用户名和密码不能为空!");
return false;
}
if (username.length < 6 || username.length > 20) {
alert("用户名长度应在6~20个字符之间!");
return false;
}
if (password.length < 6 || password.length > 20) {
alert("密码长度应在6~20个字符之间!");
return false;
}
if (password != confirm_password) {
alert("密码和确认密码不一致!");
return false;
}
}
</script>
</head>
<body>
<h2>用户注册</h2>
<form name="myForm" 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>
</body>
</html>
```
在这个表单中,我们在`<script>`标签中定义了一个`validateForm()`函数,该函数会在用户提交表单时被调用。函数会获取表单中的用户名、密码和确认密码,并对它们进行校验。如果校验不通过,函数会弹出一个警告框并返回`false`,阻止表单提交。否则,函数会返回`true`,表单会被提交。
注意,这只是一个比较简单的示例,实际应用中可能需要更复杂的校验逻辑。同时,前端校验只是为了提高用户体验和减轻后端校验的压力,真正的安全性还是需要后端校验来保证。