Javascript 表单验证、onblur 验证和提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27157644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript form validation, onblur validation and submitting
提问by Tom C
I am writing a basic form validation script, basically as we go through the form each field is checked onblur like this
我正在编写一个基本的表单验证脚本，基本上在我们浏览表单时，每个字段都像这样在 onblur 上进行检查
<p>
<label>Full Name *</label>
<input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" />
<span class="formHint" id="hintFullName">Enter your full name</span>
<span id="errorFullName"></span>
<span class="success" id="successFullName"><img src="images/tick.png" /></span>
</p>
This all works fine calling the function validate which I made so that you could pass it the field name and it will just check if it has been entered etc. This is all fine. Below is the validate function.
这一切都可以正常调用我创建的函数验证，以便您可以将字段名称传递给它，它只会检查它是否已输入等。这一切都很好。下面是验证函数。
function validate(field) {
// Get the value of the input field being submitted
value = document.getElementById(field).value;
// Set the error field tag in the html
errorField = 'error' + field;
// Set the success field
successField = 'success' + field;
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
}
}
Now my question is, after validating on the fly using the onblur what is the best way for me to proceed when submitting? Do I need to write another function to manually check all of the form fields or is there a better way.
现在我的问题是，在使用 onblur 即时验证之后，提交时我继续进行的最佳方式是什么？我是否需要编写另一个函数来手动检查所有表单字段，还是有更好的方法。
I have been thinking about it for a while but I cant seem to think the best way to check once submitted.
我已经考虑了一段时间，但我似乎想不出提交后进行检查的最佳方法。
Sorry if any of this doesn't make sense, been confusing myself for a few hours now.
对不起，如果其中任何一个没有意义，我已经困惑了几个小时了。
Many thanks in advance.
提前谢谢了。
采纳答案by Hyman
Ah, validation!
啊，验证！
Yep, you'll need to manually check. How "manually" will differ. It could be straight, brute manual like this:
是的，您需要手动检查。如何“手动”会有所不同。它可能是像这样直接的、粗暴的手册：
function handleOnSubmit(e) {
validate('FullName');
validate('ZipCode');
validate('City');
// Loop through all error fields and see if any are present
}
Not very efficient, as you know...
效率不高，如你所知......
Instead, let's write a loop that does it!
相反，让我们编写一个循环来完成它！
Butbefore that, I'd recommend updating your validatefunction to return true/false if an error is/isn't present.
但在此之前，我建议更新您的validate函数以在错误存在/不存在时返回真/假。
Something like:
就像是：
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
return true;
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
return false;
}
Alright!
好吧！
Now we can create a parent validator which can call your validatefunction with all the form elements.
现在我们可以创建一个父验证器，它可以validate使用所有表单元素调用您的函数。
Something like:
就像是：
function handleOnSubmit(e) {
// Query your elements some how
var inputs = document.forms[0].getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
if( validate(inputs[i].id) === false) {
// Error occurred - we'll prevent the form submission
e.preventDefault();
}
}
}
Here's a JSFiddle for demo: http://jsfiddle.net/ww2grozz/
这是演示的 JSFiddle：http: //jsfiddle.net/ww2grozz/
The other way (if you prefer not running the validation multiple again on already validated elements) is to maintain a state of "validated" objects. You could then check against those.
另一种方法（如果您不想在已经验证的元素上再次运行验证倍数）是维护“已验证”对象的状态。然后你可以检查这些。
Something like this:
像这样的东西：
var validated = {};
function validate(field) {
// Existing logic
if (value != '') {
validated[field] = true;
} else {
validated[field] = false;
}
}
Then, going back to the above parent validator:
然后，回到上面的父验证器：
function handleOnSubmit(e) {
// Query your elements
var inputs = document.forms[0].getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
var name = inputs[i].id;
if (!validated[name]) {
// Prevents submission
e.preventDefault();
// Call validate
validate(name);
}
}
}
A second fiddle: http://jsfiddle.net/ww2grozz/2/
第二个小提琴：http: //jsfiddle.net/ww2grozz/2/
Finally, if this is going to a server...don't forget server side validation!
最后，如果这是去服务器......不要忘记服务器端验证！
