写一个表单和js函数在提交表单前判断用户名,密码,确认密码
时间: 2024-02-28 08:56:08 浏览: 108
好的,以下是一个简单的 HTML 表单和 JavaScript 函数,可以用于在提交表单前判断用户名、密码和确认密码是否符合要求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateForm() {
// 获取表单中的用户名、密码和确认密码输入框
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
var confirmPassword = document.forms["myForm"]["confirmPassword"].value;
// 判断用户名是否为空
if (username == "") {
alert("用户名不能为空");
return false;
}
// 判断密码是否为空
if (password == "") {
alert("密码不能为空");
return false;
}
// 判断确认密码是否为空
if (confirmPassword == "") {
alert("确认密码不能为空");
return false;
}
// 判断密码和确认密码是否一致
if (password != confirmPassword) {
alert("密码和确认密码不一致");
return false;
}
// 如果所有条件都满足,则返回 true,提交表单
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
<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="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
这个表单中包含了用户名、密码和确认密码三个输入框,以及一个提交按钮。当用户点击提交按钮时,会先调用 `validateForm()` 函数进行验证,如果验证通过则提交表单,否则阻止表单提交并显示相应的提示信息。你可以根据需要修改提示信息和表单元素的样式。
阅读全文