3

我在 Tomcat 7 上运行 JSF 2.0 应用程序。我想使用 javascript 进行表单验证。这是我的问题的简化版本：

我有两个 jsf 文件 index.xhtml 和 result.xhtml 以及一个带有 javascript 代码的文件。这两个 xhtml 文件都在应用程序根文件夹中。
在 index.xhtml 中： 

<h:head>  
    <h:outputScript name="script.js" library="js" />  
</h:head>  
<h:body>  
    <h:form>  
        <h:inputSecret id="password" />  
        <h:inputSecret id="confirm" />  
        <h:commandButton 
                type="button" 
                value="go" 
                action="result"  
                onclick="checkPassword(this.form)" />  
    </h:form>  
</h:body>

脚本.js： 

function checkPassword(form){  
    var password = form[form.id+":password"].value;  
    var confirm = form[form.id+":confirm"].value;  
    alert(password + " " + confirm);  
    if(password == confirm){  
        form.submit();  
    }else{  
        alert("Password doesn't match");  
    }  
}

result.xhtml 的内容无关紧要。当我运行这个 index.xhtml 时，我得到了我的预期。当我用相同的值填充文本框并单击按钮时，将触发 checkPassword 函数，但浏览器仍停留在 index.xhtml 上，我希望它转发到 result.xhtml。我究竟做错了什么？我不仅对漫游感兴趣，而且对它不起作用的原因感兴趣。你能帮助我吗？

4

1 回答 1

1

导航是通过执行命令按钮的操作来执行的，而不是单独提交表单。您基本上是通过调用来抑制按钮的默认操作form.submit()。这样，JSF 将无法找出在提交表单期间按下了哪个命令按钮。相反，您应该返回true或false取决于验证结果。如果您返回true，则按钮的默认操作将照常继续。

将您的 onclick 处理程序更改为

onclick="return checkPassword(form)"

和你的 JS 代码

function checkPassword(form) {
    var password = form[form.id + ":password"].value;
    var confirm = form[form.id + ":confirm"].value;

    if (password == confirm) {
        return true;
    } else {
        alert("Password doesn't match");
        return false;
    } 
}

与具体问题无关，这不是验证输入的最佳方式。由于 JavaScript 完全在客户端运行，最终用户可以完全控制其进程。最终用户可以完全禁用 JavaScript，甚至可以操纵/绕过代码。

而是使用普通的 JSF 在服务器端完全进行验证Validator。您可以使用<f:ajax>即时验证，从而改善用户体验。显示 JS 警报也是 90 年代。而是使用 JSF 自己的<h:message>工具在页面本身中显示消息。

于 2012-06-21T13:02:59.077 回答