使用JavaScript验证HTML表单输入

时间:2012-08-21 04:57:10

标签: javascript html

  

可能重复:
  Validate email address in Javascript?

我有一个HTML表单,它使用PHP / MySQL发布到数据库。在表单的电子邮件部分,如果用户输入的电子邮件地址不是有效的电子邮件地址格式,我希望用户显示错误消息。我正在使用这样的代码进行建模,但我无法使其工作。

请注意,每当我点击表单上的提交按钮时,表单都会提交,并且PHP操作正常。问题是我可以在表单中输入任何我喜欢的内容,它会通过。我希望它显示错误消息“不是有效的电子邮件地址”。我知道我也可以通过PHP验证,但我也希望在客户端进行验证。

有人可以帮忙吗?

    <script type="text/javascript">
function validateEmail()
{
var x=document.forms["test"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
alert("Not a valid e-mail address");
return false;
 }
 }
  </script>


  <form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">

  <input type="text" name="email" placeholder="Enter your e-mail" />

   <input type="submit" value="Show Me!" />

   </form>

2 个答案:

答案 0 :(得分:1)

你错过了html中的=,它没有形成名称测试..而javascript找不到名称测试的形式,并抛出错误...检查控制台日志对于javascript错误..

<form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">

<form name="test" action="roads.php" onsubmit="return validateEmail();" method="post">

Working code

答案 1 :(得分:0)

这是访问表单及其字段的更好方法 - 还记得返回true

假设<form id="testform" action="roads.php" method="post">

我们可以使用不显眼的脚本

<script>
window.onload=function() {
  document.getElementById("testform").onsubmit=function () {
    var email=this.email.value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
      alert("Not a valid e-mail address");
      return false;
    }
    return true;
  }
}
</script>