Question

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

我有两个jsf文件index.xhtml和result.xhtml以及一个带有javascript代码的文件。两个xhtml文件都在apps根文件夹中在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>

script.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。我究竟做错了什么？我不仅对散步感兴趣，而且还因为它无法正常工作。你能帮助我吗？

Answer 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>工具在页面本身中显示消息。

为什么使用javascript验证的jsf表单不会转发视图？

1 个答案: