JavaScript验证文本区域中的@符号

Question

JavaScript验证文本区域中的@符号

4

我正在尝试完成一项任务，但无法使代码验证通过。问题是我需要在表单中的电子邮件文本框中检查是否存在“@”，但同时我还需要检查姓名文本框是否为空。我只能让其中一个起作用。

这是我的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Weclome to the Recipe Collection Website</title>
    <script>
    function validateForm()
    {
    var x=document.forms["myForm"]["name"].value;
    if (x==null || x=="")
     {
     alert("Name text box must be filled out");
     return false;
     }
    </script>
    <script>
    function checkEmail()
    {
    var y=document.forms["myForm"]["email"].value;
    var atpos=y.indexOf("@");
    var dotpos=y.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
     {
     alert("Not a valid e-mail address");
     return false;
     }
    }
    </script>
  </head>
  <body>
    <form name="myForm" onsubmit="return validateForm()" method="post">
        Name: <input type="text" name="name"><br>
        Email: <input type="text" name="email"><br>
        Number of recipes previously submitted: <input type="radio" name="recipes" value="0">0<br>
        <input type="radio" name="recipes" value="1-2">1-2<br>
        <input type="radio" name="recipes" value="3-4">3-4<br>
        <input type="radio" name="recipes" value="5+">5+<br>
        Have you ever submitted recipes to another site?: <input type="radio" name="othersite" value="yes">Yes<br>
        <input type="radio" name="othersite" value="no" checked>No<br>
        <input type="submit" value="Submit">
    </form>
  </body>
</html>

这种方法是否正确？

感谢您的帮助。

- Ryan W

2个回答

1

我知道你从哪里得到这个，试试这个

<script type="text/javascript">
function validateForm() {
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="") {
  alert("First name must be filled out");
  return false;
}

var x=document.forms["myForm"]["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>

- Mr. Alien

我尝试使用上面的代码，但仍然无法使其工作。我一定做错了什么。 - Ryan W

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Ajtai · Accepted Answer

工作中的jsFiddle演示

你问题的根本原因是，即使一切正常，你仍然从验证方法中返回了一个虚假值。

首先，简单部分是合并这两个方法：

我不会使用内联js，但是按照你现有的方式...只需创建一个将两个函数组合起来的方法：

<script>
function doBoth() {
    return validateForm() && checkEmail();
}
<script>

...

<form name="myForm" onsubmit="return doBoth()" method="post">

第二步是修复短路问题

然而，您使用的两种方法存在错误，它们会隐式地返回undefined。由于undefined为假值，因此doBoth永远不会执行第二个方法。这是由于短路操作导致的。JS很懒，因此如果&&语句的第一部分为false，则JS会停止并且不会计算第二部分，因为现在整个语句无法为真。

解决此问题的方法是，如果验证通过，则返回true。

另外，请注意，在validateForm中缺少一个闭括号。

<script>

function validateForm()
{
    var x=document.forms["myForm"]["name"].value;
    if (x==null || x=="")
    {
        alert("Name text box must be filled out");
        return false;
    }

    // everything ok *this is a MUST to return*
    return true;
}

function checkEmail()
{
    var y=document.forms["myForm"]["email"].value;
    var atpos=y.indexOf("@");
    var dotpos=y.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    // everything ok *this is a MUST to return*
    return true;
}
</script>