Question

我想提交一份表格。但在此之前我想验证它。验证是一种javascript方法。只要javascript方法与表单在同一个.jsp文件中，一切正常。

但是我想将它放到外部javascript文件中，并且永远不会调用该方法。为什么呢？

这部分应该包含javascript到.jsp文件中。

  <script type="text/javascript" src="Validate.js">
    var val = new Validate();
    var result= val.validateArticle();
</script>

这是我要提交的表单：

<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>

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;
    }
}

到目前为止唯一有效的方法是将所有内容放入一个.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>

Answer 1

首先，您不能在一个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>

在HTML中，onsubmit="return result"可能无法按照您的意图行事。你想在提交时验证，不是吗？所以你必须调用validateArticle()函数，而不是页面加载。并且不需要实例化Validate对象。

onsubmit="return validateArticle()"

Answer 2

这就是你所需要的。您无需创建实例即可使用验证功能。

脚本：

<script type="text/javascript" src="Validate.js"></script>

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>

因此，当您将Javascript移动到外部文件时。您无需执行任何特殊操作即可访问它。没有实例化要求。如果它包含在文件本身中，只需使用javascript即可。如果您发现它不起作用，则可能是文件未正确加载，在这种情况下检查文件是否在正确的目录中并且文件的大小写是正确设置的，因为某些文件系统区分大小写。

如何从表单调用外部JavaScript方法？

2 个答案: