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>

这条路走吗？

谢谢你的帮助。

4

2 回答 2

2

工作jsFiddle 演示

问题的根本原因是，即使一切正常，您的验证方法也会返回错误值。

首先，简单的部分是结合这两种方法：

我不会做内联js，但坚持你所拥有的......只需创建一个结合这两个功能的方法：

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

...

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

二是解决短路问题

但是，您的两种方法存在错误，您隐式地undefined从它们返回。undefined是错误的，所以doBoth永远不会使用第二种方法。这是因为短路。JS 是惰性的，因此如果&&语句的第一部分为假，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>
于 2012-10-23T07:45:36.507 回答
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>
于 2012-10-23T07:44:36.207 回答