2

我正在尝试为我的网站创建一个经过验证的注册表单，目前正在编写一个演示以供练习。我能够使用 javascript 验证表单。但是，我在某处读到应该在客户端和服务器端验证表单，因为可以禁用 JS。我想知道如果不满足所有 javascript 验证，是否有一种方法可以简单地禁用提交按钮（我注意到 eBay 在他们的注册表单中使用了类似的方法），如果是这样，我将如何实现这一点？

这是我目前所处的位置：

<script type="text/javascript">
function validateEmail(email) { 

    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(re.test(email)) {
        document.getElementById('result').innerHTML = '<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/> Valid';
    } else {
        document.getElementById('result').innerHTML = '<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/> Invalid';
    }
} 
function validatePass(pass){
    if(pass.length < 6){
        document.getElementById('pass-result').innerHTML='<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/>Your password must be at least 6 characters';
    }else{
        document.getElementById('pass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>valid';
    }
}
function validateCPass(cpass){
    var pass = document.getElementById('pass').value;

    if(cpass != pass){
        document.getElementById('cpass-result').innerHTML="Passwords must match";
    }else{
        document.getElementById('cpass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>';
    }   
}
</script>
</head>
<body>
    <form action="practice.php" method="post">
        e-mail:<br/><input id="email" type="text" onblur="validateEmail(this.value)" /><span id="result"></span>
        <br/><br/>Password:<br/><input type="password" id="pass" onblur="validatePass(this.value)"><span id="pass-result"> </span>
        <br/><br/>Confirm Password:<br/><input type="password" id="confpass" onblur="validateCPass(this.value)"> <span id="cpass-result"></span>
        <br/><input type="submit">
    </form>
</body>
4

4 回答 4

7

不，这是不可能的，原因有很多：

  • 可访问性。您客户的浏览器可能不支持 Javascript，或者用户可能禁用了它（是的，有些人支持）。

  • 安全。Web 应用程序向整个 Internet 公开 HTTP 接口。你甚至不需要浏览器来发送 HTTP 请求！因此，您的后端需要将任何 HTTP 请求视为不受信任并对其进行验证。对于来自不可靠来源的所有数据都是如此。

因此：

任何正确的 Web 应用程序都必须进行服务器端验证。

客户端验证是一种 UI 增强功能，通过提供更快的反馈来改善用户体验。

于 2012-07-02T14:18:22.877 回答
2

您可以默认禁用该按钮，然后让 JavaScript 重新启用它。然而，这并不能阻止用户自己重新启用它，可能使用跨站点脚本注入，或者更实际地使用诸如 FireBug 之类的东西或开发人员工具中默认内置的浏览器之一。

为了用户体验以及系统的完整性和安全性，我强烈建议同时进行客户端和服务器端验证。如果您根本没有时间处理两者，那么服务器端肯定会优先考虑。验证的客户端是一种旨在为用户提供更好的服务；遗憾的是，在破坏代码时，用户可能对您的代码有不同的感觉。

始终进行服务器端验证。:)

于 2012-07-02T14:19:03.690 回答
1

在服务器中检查的原因也是恶意用户可以向您的服务器发送手工制作的 POST 或 GET 请求，无论这些表单是否存在于您的应用程序中或在您的浏览器中被禁用。仅禁用表单不足以解决此问题。

如果您仍然想在非 JS 浏览器中禁用表单，您可以做的是默认禁用它们并在 JS 上启用它们。

于 2012-07-02T14:19:25.293 回答
0

你不要重新发明轮子。有很多工具可以使用 JavaScript 进行验证。例如检查 jQuery 验证插件；您可以使用几行代码来验证表单。

http://docs.jquery.com/Plugins/Validation

关于服务器端验证，您应该始终验证服务器上的数据。JavaScript 验证旨在防止用户错误，但它们根本不为您的系统提供任何安全性。

于 2012-07-02T14:19:34.973 回答