如何从表单调用外部 javascript 方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12245109/
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
how to call an external javascript method from a form?
提问by Sanyifej?
I want to submit a form. But before that I wanna validate it. The validation is a javascript method. everything is ok as long as the javascript method is in the same .jsp file as the form.
我想提交一个表格。但在此之前，我想验证它。验证是一种 javascript 方法。只要 javascript 方法与表单在同一个 .jsp 文件中，一切都可以。
But I want to put it to an external javascript file, and the method gets never called. Why?
但我想把它放到一个外部的 javascript 文件中，并且这个方法永远不会被调用。为什么？
this part should include the javascript into .jsp file.
这部分应该将 javascript 包含到 .jsp 文件中。
<script type="text/javascript" src="Validate.js">
var val = new Validate();
var result= val.validateArticle();
</script>
here is the form I want to submit:
这是我要提交的表格：
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return result" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
The Validate.js is in the same directory as the .jsp file. here is the Validate.js (but it works fine, if it is in the .jsp file.)
Validate.js 与 .jsp 文件位于同一目录中。这是 Validate.js（但它工作正常，如果它在 .jsp 文件中。）
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
so far the only thing that works is if I put everything into one .jsp file like below
到目前为止，唯一有效的是，如果我将所有内容都放入一个 .jsp 文件中，如下所示
<script type="text/javascript" >
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
</script>
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
<form:form method="post" action="word.html">
<input type="submit" value="n?chste Wort">
</form:form>
</c:if>
回答by Zeemee
First, you cannot mix a src-ref and local code in one scripttag.
首先，您不能在一个script标签中混合使用 src-ref 和本地代码。
<script type="text/javascript" src="Validate.js"></script>
<script type="text/javascript">
var val = new Validate(); // 'new Validate' won't work.
var result= val.validateArticle();
</script>
In HTML, onsubmit="return result"will probably not do what your are intended to. You want to validate on submit, won't you? So you have to call the validateArticle()function then, not on page load. And there is no need to instanciate a Validateobject.
在 HTML 中，onsubmit="return result"可能不会执行您的意图。您想在提交时进行验证，不是吗？所以你必须调用该validateArticle()函数，而不是在页面加载时调用。并且不需要实例化一个Validate对象。
onsubmit="return validateArticle()"
回答by Scott
This is all you need. You don't need to create an instance to use the Validation function.
这就是你所需要的。您无需创建实例即可使用验证功能。
Script:
脚本：
<script type="text/javascript" src="Validate.js"></script>
HTML Form:
HTML 表单：
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
So when you are moving Javascript to an external file. You don't need to do anything special to access it. There is no instantiation required. Just use the javascript as you would if it was included in the file itself. If you find it doesn't work, it's likely the file isn't loading properly, in which case check the file is in the right directory and the case of file is correctly set, as some file system are case sensitive.
因此，当您将 Javascript 移动到外部文件时。您无需执行任何特殊操作即可访问它。不需要实例化。如果它包含在文件本身中，只需使用 javascript。如果您发现它不起作用，则可能是文件未正确加载，在这种情况下，请检查文件是否位于正确的目录中并且文件的大小写设置是否正确，因为某些文件系统区分大小写。
