我希望能够在填写完成后立即验证表单，我仍然在文本字段中 . 如果遗漏/错误，它会立即通知我在文本字段的右侧 . 在这里，我将HTML和JavaScript密码验证与警报窗口相结合，但我不知道如何使这些警报出现在文本旁边并立即显示 . 请任何建议 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="passForm" onsubmit="return value (this)">
Your Password: <input type="password" name="passInput">
</br>
Confirm Password: <input type="password" name="confirmPassInput">
</br>
<input type="submit" value="Submit" id="submit" onclick="return value(passForm)">
</form>
<script>
function value(passForm) {
//Validating length
if ((passForm.passInput.value).length < 8) {
alert("Your password has less than 8 characters.");
passForm.passInput.focus();
return false;
}
//check for lower case
if (!passForm.passInput.value.match(/[a-z]/)) {
alert("Password must contain at least one lower case letter.");
passForm.passInput.focus();
return false;
}
//check for upper ase
if (!passForm.passInput.value.match(/[A-Z]/)) {
alert("Password must contain at least one upper case letter.");
passForm.passInput.focus();
return false;
}
//check for number
if (!passForm.passInput.value.match(/\d+/g)) {
alert("Password must contain at least one number.");
passForm.passInput.focus();
return false;
}
//Validating confirmation input
if (passForm.confirmPassInput.value == "") {
alert("Please confirm your password.");
passForm.passInput.focus();
return false;
}
//Validationg confirmation matches
if (passForm.confirmPassInput.value != passForm.passInput.value) {
alert("Your confirmation password does not match.");
passForm.passInput.focus();
return false;
}
};
</script>
</body>
</html>
2 回答
我可以建议2个选项 . 首先尝试使用validator.js，或者您可以添加keyup事件监听器并在每次击键时进行验证 .
在Bootstrap之类的前端库中，您可以使用一些表单验证样式 . 你可以在Bootstrap的链接上查看它 .
你可以做出类似的东西 . 只是尝试在表单元素上使用单个
name属性 . 当某个元素的值无效时，显示一些隐藏元素或创建用于显示错误位置的元素，并且可以在用户填充输入时添加要监视的事件侦听器，此时您可以动态检查每个字段 . 如果某些内容无效，请向用户动态使用红色边框或红色文本消息，当用户填写该字段有效时，只需在字段下显示绿色边框或绿色文本消息 .