使用JavaScript进行即时表单验证
[英]Instant form validation with JavaScript
问题描述
I want to be able to validate form instantly when I fill it out and I'm still on the text field. 
我希望能够在填写表单后仍能在文本字段中立即验证表单。 If something is missing/wrong it notifies me instantly on the right of the text field. 如果缺少/错误，它将在文本字段的右侧立即通知我。 Here I have combined HTML and JavaScript password validation with the alert window, but I don't know how to make these alerts appear next to the text and be instant. 在这里，我将HTML和JavaScript密码验证与警报窗口结合在一起，但是我不知道如何使这些警报显示在文本旁边并即时显示。 Any advice please. 有任何建议请。
<!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 个解决方案
解决方案1
0 2018-12-09 21:23:56
In Bootstrap like Front-end Libraries let you to use some form validation styles. 在Bootstrap之类的前端库中，您可以使用某些表单验证样式。 You can check it on link of Bootstrap. 您可以在Bootstrap链接上检查它。
You can make something like it. 你可以做类似的事情。 Just try to use single name attributes on form elements. 只需尝试在表单元素上使用单一name属性即可。 When some element's value is not valid, show some hided elements or create elements for showing where is wrong and you can add event listeners to watch while inputs are filling by user, at this time you can check every field dynamically. 当某个元素的值无效时，显示一些隐藏的元素或创建用于显示错误位置的元素，您可以添加事件侦听器以监视用户填充输入时的内容，此时，您可以动态检查每个字段。 If something is not valid, use red bordered or red color text messages to user dynamically, when the user fill the field valid, show them green borders or green text messages under the field simply. 如果无效，请动态地向用户使用带有红色边框或红色的文本消息，当用户填写有效字段时，只需在该字段下向其显示绿色边框或绿色文本消息即可。
解决方案2
0 2018-12-09 21:49:53
I can suggest 2 options. 我可以建议2个选项。 First try using validator.js or you can add keyup event listener and validate on every keystroke. 首先尝试使用validateator.js，否则您可以添加keyup事件侦听器并在每次击键时进行验证。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.