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

时间:2012-03-17 19:03:23

标签: javascript html validation

我已经联系表格了:

<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之类的服务器端语言。有什么想法吗?

3 个答案:

答案 0 :(得分:1)

看一下live example

$('#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;
    }
});​

答案 1 :(得分:1)

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

  1. 用户可以告诉浏览器不执行页面上的任何JavaScript。如果表单本身不依赖于JavaScript,表单仍会显示,操作页面仍然存在,但所有验证都已消失。
  2. 用户可以编辑DOM。网页开发人员工具(如Chrome,Firefox和IE中的工具)可以让您轻松更改表单的属性。这包括从表单中删除onsubmit等属性。或者,用户可以完全从网页使用的资源中删除JavaScript功能。这允许用户避免进行验证。
  3. 用户可以直接将POSTGET数据发送到操作网址,而无需浏览您的网页。这对攻击者来说非常好,因为他们可以在不通过浏览器的情况下将格式错误的表单注入您的服务器 - 他们可以使用终端,这样更方便。
  4. 总之,不要这样做。允许用户控制验证是一件坏事。用户可以关闭客户端 JavaScript,但无法关闭PHP 服务器端验证。如果您不想遭受令人尴尬的跨站点脚本攻击和其他漏洞,请使用PHP验证。

    如果您正在寻找PHP表单验证库,您可以在Internet上找到许多它们。例如,我个人已经为one such library做出了贡献,它可以很好地评估POSTGET类型的字段。我为自我推销道歉,我必须坚持你为安全起见做服务器端验证。

    这并不是说客户端验证很糟糕,永远不应该使用。但它应该始终由服务器端验证备份。您应该查看客户端验证,以便在不重新加载的情况下通知用户表单输入存在问题,但始终使用服务器端验证来实际查看问题的输入。

答案 2 :(得分:0)

小心不要混淆。你想做客户端验证,这是很好的,但不像服务器端验证那样需要,你只能在服务器上进行验证。

任何script-kiddie仍会设法将一些疯狂数据发布到您的服务器,因此您必须检查您的请求并清理服务器端的数据。

但是,如果你想在提交之前验证你的表单数据(这绝对是一个很好的标准),你应该使用众多可用的jQuery插件之一来获得最大的收益。

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

如果你不喜欢使用jQuery,你总是可以指定onBlur=myFunction()来执行输入字段失去焦点时所需的任何逻辑。