家庭作业的帮助,我在这里做错了什么? [Javascript,验证]

时间:2010-12-15 04:48:23

标签: javascript forms html5 validation

尝试使用教授所说的功能来获取此表单以验证电子邮件。我们不能使用jquery或任何其他方式来处理这个问题。他非常......具体......关于他如何完成任务。无论如何,上周的网页设计课程并没有太多解释介绍javascript。

该功能只是验证电子邮件,但我对如何正确调用该函数没有任何疑问(verify_email)。我已经找到了无数的如何做其他方式的例子,但我很确定他会因为没有按照他的方式做到这一点而取得积分。疯狂地尝试在编辑中格式化...当我提交时,它很好。

 <!DOCTYPE html>
 <html lang="en-US">
 <head>
   <title>Feedback</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4.4/jquery.min.js"></script>

  <script type="text/javascript">
  function verify_email ()
  {
      var email_val=document.getElementById("email").value;
  var regex = /^[A-Z0-9_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
  if( email_val.search( regex ) == -1)
  {
  alert("Email is not valid");
  return false;
  }
  else
  {
  return true;
  }
  }
 </script>


 </head>
 <body class="sdd">

  <nav>
    <a href="Project4.html">Home</a>
      &nbsp;&nbsp;<a href="resume.html">Resume</a>
      &nbsp;&nbsp;<a href="classList.html">Class List</a>
      &nbsp;&nbsp;<a href="misc.html">Miscellaneous</a>
      &nbsp;&nbsp;<a href="comments.html">Feedback</a>
  </nav>
    <header>
  <h1 class="sd">Feedback Page</h1> 
  </header>
    <div id="wrapper">
        <div id="leftcolumn2">
        </div>
    <div id="rightcolumn2">
     <section>
     <br><br>
      Feedback Form:
    <form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
        <table class="comtab">
            <tr>
                <td>*First Name: <input type="text" name="fname" id="fname"></td>
                <td>*Last Name: <input type="text" name="lname" id="flname"></td>
            </tr>
            <tr>
                <td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
            </tr>
            <tr>
                <td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>

            </tr>
            <tr>
                <td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
            </tr>

        </table>
    </form>
    </section>

    <footer class="footbot">
  &copy; 2010
    </footer>
    </div>
    </div>

6 个答案:

答案 0 :(得分:3)

试试这个

  <!DOCTYPE html>
    <html lang="en-US">
 <head>
  <title>Feedback</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

      <script type="text/javascript">
      function verify_email ()
      {
          var email_val=document.getElementById("email").value;
      var regex = /^[A-Z0-9_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
      if( email_val.search( regex ) == -1)
      {
      alert("Email is not valid");
      return false;
      }
      else
      {
      return true;
      }
      }
     </script>


    </head>
    <body class="sdd">

  <nav>
    <a href="Project4.html">Home</a>
          &nbsp;&nbsp;<a href="resume.html">Resume</a>
          &nbsp;&nbsp;<a href="classList.html">Class List</a>
          &nbsp;&nbsp;<a href="misc.html">Miscellaneous</a>
          &nbsp;&nbsp;<a href="comments.html">Feedback</a>
  </nav>
        <header>
  <h1 class="sd">Feedback Page</h1> 
  </header>
        <div id="wrapper">
            <div id="leftcolumn2">
            </div>
        <div id="rightcolumn2">
        <section>
        <br><br>
        Feedback Form:
        <form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
            <table class="comtab">
                <tr>
                    <td>*First Name: <input type="text" name="fname" id="fname"></td>
                    <td>*Last Name: <input type="text" name="lname" id="flname"></td>
                </tr>
                <tr>
                    <td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
                </tr>
                <tr>
                    <td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>

                </tr>
                <tr>
                    <td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
                </tr>

            </table>
        </form>
        </section>

        <footer class="footbot">
      &copy; 2010
        </footer>
        </div>
        </div>
 </body>
</html>

答案 1 :(得分:0)

尝试使用

 <script type="text/javascript">
  function verify_email (email_val)
  {
    var regex = /^[A-Z0-9_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if( email_val.search( regex ) == -1)
    {
      alert("Email is not valid");
      return false;
    }else{
      return true;
    }
  }
 </script>

答案 2 :(得分:0)

在页面正文中,您需要使用电子邮件的输入注册该功能。

<input type="text" name="email" onchange="verify_email()" />

答案 3 :(得分:0)

这可能是问题所在:

function verify_email(email_val)
{
  var regex = /^[A-Z0-9_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

  if (email_val.search(regex) == -1)
  {
    alert("Email is not valid");
    return false;
  }

  return true;
}

它将始终返回true。此外,search不处理正则表达式。您需要将字符串运行到正则表达式。此代码可能有效:

function verify_email(email_val)
{
  var regex = /^[A-Z0-9_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

  if (regex.exec(email_val) == -1)
  {
    alert("Email is not valid");
    return false;
  } else {
    return true;
  }
}

另外,请参阅Matt Phillips发表的评论:Homework help, what am I doing wrong here? [Javascript, validation]

此外,未定义verify_email(email)。您应该使用verify_email(document.getElementById('email').value)

答案 4 :(得分:0)

您是否要将字符串“email”传递给电子邮件验证功能?或者您想实际查看电子邮件input中的内容吗?如果您只是将“电子邮件”传递给测试,则需要使用引号(')才能正确传递。

答案 5 :(得分:0)

javascript变量电子邮件未在任何地方定义,因此您将未定义的变量传递给javascript函数。像

一样调用函数
<input type="submit" value="Submit Comment" onclick="verify_email(document.getElementById('email').value);">