如何使用JavaScript验证联系人表单

How to validate a contact form using JavaScript?

本文关键字：联系人 表单 验证 JavaScript 何使用      更新时间：2023-09-26

我制作了一个联系表格：

<form action="mailto:myemail@me.com" method="post" enctype="plain/text">
  <label for="name">Name:</label>&nbsp;<input type="text" name="name" />
  <label for="email">Email:</label>&nbsp;<input type="text" name="email" />
  <br clear="all" />
  <input type="submit" value="Compose" />
</form>

我想创建一个javascript表单验证器，而不必使用像PHP这样的服务器端语言。有什么想法吗？

这是个坏主意。可以通过多种方式绕过JavaScript和JavaScript验证。

  1. 用户可以告诉浏览器不要执行页面上的任何JavaScript。如果表单本身不依赖于JavaScript，那么表单仍然会显示，并且操作页面仍然存在，但您的所有验证都消失了
  2. DOM可以由用户编辑。Chrome、Firefox和IE等网页开发工具使更改表单属性变得轻而易举。这包括从表单中删除onsubmit等属性。或者，用户可以简单地从网页使用的资源中完全删除JavaScript功能。这允许用户避免进行验证
  3. 用户可以将POST或GET数据直接发送到操作URL，而无需浏览您的页面。这对攻击者来说很好，因为他们甚至可以在不通过浏览器的情况下将格式错误的表单注入到服务器中——他们可以使用终端，这要方便得多

总之，不要这样做允许用户控制验证是件坏事。用户可以关闭客户端JavaScript，但不能关闭PHP服务器端验证。如果您不想遭受尴尬的跨站点脚本攻击和其他漏洞，请使用PHP验证。

如果你正在寻找一个PHP表单验证库，你可以在互联网上找到很多。例如，我个人为一个这样的库做出了贡献，该库可以很好地评估POST或GET类型表单中的字段。我对自我推销表示歉意，为了安全起见，我必须坚持让您进行服务器端验证。

这并不是说客户端验证很糟糕，永远不应该使用。但它应该始终通过服务器端验证进行备份。您应该将客户端验证视为在不重新加载的情况下通知用户其表单输入存在问题的一种方式，但始终使用服务器端验证来实际查看输入是否存在问题。

看看这个实际的例子。

$('#form1').submit(function() {
    // Store messages
    var msgs = [];
    // Validate name, need at least 4 characters...
    var name = $('[name=name]', this);
    if(name.val().length < 4) {
        msgs.push('- Name need at least 04 characters;');
    }
    // Validate email [...]
    // {CODE}
    // Validate otherthings [...]
    // {CODE}
    if(msgs.length !== 0) {
        alert("We have some problems:'n'n" + msgs.join("'n"));
        return false;
    }
});​

注意不要把事情搞混。您想要进行客户端验证，这很好，但不像服务器端验证那样需要，服务器端验证只能在服务器上进行。

任何脚本kiddie仍然会设法将一些疯狂的数据发布到你的服务器上，所以你必须检查你的请求并在服务器端清理数据。

但是，如果你想在提交之前验证你的表单数据（这绝对是一个很好的标准），你应该使用众多可用的jQuery插件中的一个来获得最大的回报。

这里有一个：http://docs.jquery.com/Plugins/Validation#Example

如果您不喜欢使用jQuery，那么当输入字段失去焦点时，您可以始终指定onBlur=myFunction()来执行所需的任何逻辑。

相关文章：