显示一个简单的 javascript onSubmit 处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5897360/
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
Show me a Simple javascript onSubmit handler
提问by norris1023
Hello again everyone i am working on this
大家好，我正在研究这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
我在这里真的很困惑.. 我需要一个 onsubmit 表单处理程序和一个创建验证脚本。好的，如果我是对的，验证脚本是需要正确放置的函数吗？抱歉，我知道你们中的一些人可能认为这很容易，但我仍在学习。现在我的书中有一些例子，但它们一次只需要一个。有没有一种方法可以对所有内容进行一次提交，或者必须一次提交一个？谢谢
ok I have this one i am working on..
好的，我有这个我正在研究中..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
现在我可以复制其他两个的功能吗，或者我如何为电子邮件复制一个功能？
回答by Tomgrohl
I've added an example here of how to do it:
我在这里添加了一个例子来说明如何做到这一点：
http://jsfiddle.net/tomgrohl/JMkAP/
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
我在表单中添加了一个 onsubmit 处理程序：
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
并在页面顶部添加了这个，一个简单的验证功能：
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
回答by Cheeso
OnSubmit is invoked once for the form.
OnSubmit 为表单调用一次。
You can validate all the form fields in one onSubmit function, during one call to that function.
在一次调用该函数期间，您可以验证一个 onSubmit 函数中的所有表单字段。
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
在 HTML 中：
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
回答by Alex K.
I need to have a onsubmit form handler
我需要一个 onsubmit 表单处理程序
You said it; <form onsubmit="return myValidate(this);" .... >
你说的; <form onsubmit="return myValidate(this);" .... >
myValidateis your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
myValidate是您的验证函数返回 true|false 指示您是否希望将表单提交到其处理程序脚本（您也缺少）。
回答by mcgrailm
might I suggest you use jQueryand jQuery validateto validate your form no need to re-invent the wheel
我是否建议您使用jQuery和jQuery validate来验证您的表单，无需重新发明轮子
be sure to check out validator's demo
请务必查看验证器的演示
