如何在提交时验证此HTML / JavaScript表单？ [英] How do I validate this HTML/JavaScript form onsubmit?
问题描述
如果密码不匹配，我已设法弄清楚如何错误提醒，但这并不妨碍用户仍然完全提交表单。有人可以解释我如何编写一个声明，在允许用户提交带有onsubmit函数的表单之前检查一切都返回true吗？
I have managed to figure out how to 'error' alert if the passwords do not match, but this does not prevent a user from still submitting the form altogether. Can someone please explain how I can write a statement that checks that everything returns true before allowing the user to submit the form with an onsubmit function?
请注意我知道我没有编写一个名为validateForm的函数，该函数在表单的onsubmit HTML中注明，我只知道当我编写这个函数时需要这个函数
以下是jsfiddle的链接： http://jsfiddle.net/shanny / VSUM6 / 28 /
Here is the link to the jsfiddle: http://jsfiddle.net/shanny/VSUM6/28/
以下是代码：
HTML：
<html>
<h1>Form Validation</h1>
<div id="error"></div>
<form name="myForm" action="" method="post" target="_blank" onsubmit="return validateForm()">
First Name: <input type="text" name="firstName" autofocus required >
<br />
Last Name: <input type="text" name="lastName" required >
<br />
Email: <input id="email" type="email" name="email" placeholder="e.g., name@provider.com" required>
<br />
Password: <input type="password" name="password1" id="password1" required >
<br />
Confirm Password: <input type="password" name="password2" id="password2" required > <p id="error2"></p>
<br /><br />
Sex:
<input type="radio" name="sex" value="male" >Male
<input type="radio" name="sex" value="female">Female
<br /><br />
Quantity:<br />
<input name ="scale" type="range" min="1" max="6" step="1" value="1" >
<br />
1 2 3 4 5 6
<br /><br />
Interests (select all that apply):
<br />
<input type="checkbox" class="radio" name="interests" value="running">This
<input type="checkbox" class="radio" name="interests" value="swimming">That
<input type="checkbox" class="radio" name="interests" value="hiking">Other
<br /><br />
<input name="submit" id="submit" type="submit" value="Hayo!">
</form>
</html>
JavaScript：
JavaScript:
var errorBox=document.getElementById("error");
var errorText=document.getElementById("error2");
var pass2=document.getElementById("password2");
var pass1=document.getElementById("password1");
pass2.onchange = function() {
if (pass2.value !== pass1.value) {
pass2.style.border="2px solid red";
errorText.innerHTML="Passwords do not match!";
errorText.style.color="red";
//errorBox.style.height="40px";
//errorBox.style.visibility="visible";
//errorBox.innerHTML="<p>Passwords do not match!</p>";
return false;
}
else {
pass2.style.border="2px solid #B5DCF7";
errorText.style.color="green";
errorText.innerHTML="Passwords match!";
return true;
}
};
推荐答案
防止表单默认行为的最简单方法submit是让你的函数返回false。这将阻止表单提交。
The easiest way to prevent the default behavior of the form submit is to have your function return false. This will stop the form from submitting.
var onSumbitHandler = function(event){
/* validate here */
return false;
};
另一种（技术上更好）方法是对作为传递的事件对象调用preventDefault onSubmit函数的参数。唯一的问题是IE的某些旧版本不支持此方法，因此您需要为此案例提供回退：
The other (and technically better) way is to call preventDefault on the event object that is passed as a parameter to your onSubmit function. The only issue is that some older versions of IE don't support this method, so you'll need to provide a fallback for this case:
var onSubmitHandler = function(event){
/* validate here */
if(event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
};
这篇关于如何在提交时验证此HTML / JavaScript表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
