使用HTML和Javascript的表单

Forms Using HTML and Javascript

本文关键字：表单 Javascript HTML 使用      更新时间：2023-09-26

我最近一直在使用HTML和JavaScript，我正在尝试创建一个表单，其中我有一个外部JavaScript文件链接到一个HTML文件，该文件调用一个函数来验证表单。我的问题是，当某些字段被填写时，我的表单没有发出警报，或者表单提交错误。

以下是我目前所拥有的：

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> Project 2 Submission Form </title>
  <meta charset="UTF-8">
  <script type="text/javascript" src="test.js" language="javascript">
  </script>
</head>
<body>
  <form id="myForm" action="">
    <table width="250" border="0" align="left">
      <tr>
        <form name="myForm" action="mailto:example@yourdomain.com" method="post" onsubmit="return Validate();">
          <td>
            <table width="100%" border="0">
              <tr>
                <td colspan="3">
                  <center><strong>Please Fill Out the Information Below</strong>
                  </center>
                </td>
              </tr>
              <tr>
                <td width="50">First Name</td>
                <td width="5">:</td>
                <td width="300">
                  <input name="firstname" type="text" id="FirstName" required>
                </td>
              </tr>
              <tr>
                <td>Last Name</td>
                <td>:</td>
                <td>
                  <input name="Last Name" type="text" id="LastName">
                </td>
              </tr>
              <tr>
                <tr>
                  <td>Middle Name (Optional)</td>
                  <td>:</td>
                  <td>
                    <input name="Middle Name" type="text" id="MiddleName">
                  </td>

                  <tr>
                    <td>Age</td>
                    <td>:</td>
                    <td>
                      <input name="Age" type="text" id="Age">
                    </td>
                  </tr>
                  <tr>
                    <td>Sex</td>
                    <td>:</td>
                    <td>
                      <input name="Sex" type="text" id="Sex">
                    </td>
                  </tr>

                  <tr>
                    <td>Birth Date</td>
                    <td>:</td>
                    <td>
                      <input name="BirthDate" type="text" id="BirthDate">
                    </td>
                  </tr>
                  <tr>
                    <td>Height</td>
                    <td>:</td>
                    <td>
                      <input name="Height" type="text" id="Height">
                    </td>
                  </tr>
                  <tr>
                    <td>Weight</td>
                    <td>:</td>
                    <td>
                      <input name="Weight" type="text" id="Weight">
                    </td>
                  </tr>
                  <tr>
                    <td>Salary</td>
                    <td>:</td>
                    <td>
                      <input name="Salary" type="text" id="Salary">
                    </td>
                  </tr>

                  <tr>
                    <td>Email</td>
                    <td>:</td>
                    <td>
                      <input name="Email" type="text" id="Email">
                    </td>
                  </tr>

                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>
                    <input type="submit" name="submit" value="Submit Form">
                  </td>

                </tr>
            </table>
          </td>
        </form>
        </tr>
    </table>
  </form>
</body>
</html>

JavaScript:

<script>
function Validate()
{
    var fName = document.myForm.fName;
    var lName = document.myForm.lNAme;
    var mName = document.myForm.mName;
    var age = document.myForm.age;
    var sex = document.myForm.sex;
    var birth = document.myForm.birth;
    var hght = document.myForm.hght;
    var wght = document.myForm.wght;
    var sal = document.myForm.sal;
    var email = document.myForm.email;

      if (fName.value == ""){
        alert("This field cannot be left blank.");
        fName.focus();
        return false;
      }
      if (lName.value == ""){
        alert("This field cannot be left blank");
        lName.focus();
        return false;
      }

      if (age.value == ""){
        alert("This field cannot be left blank");
        age.focus();
        return false;
        else if (age.value <1 || >99({
            alert("Please re-enter your age");
            return false;
        }
      }

      if (sex.value == ""){
        alert("This field cannot be left blank");
        sex.focus();
        return false;
        else if(sex.value != "Male" || "male" || "M" || "m" || "Female" || "female" || "F" || "f"){
            alert("The sex you have entered is not entered correctly, please try again.");
            return false;
    }
     }

      if(birth.value == ""){
          alert("Date of birth cannot be left blank.");
          birth.focus();
          return false;
          else if(birthdate != "mm/dd/yyyy"){
          alert("Enter the format in mm/dd/yyyy format);
          return false;
      }
      }

       if (hght.value == ""){
          alert("This field cannot be left blank");
          hght.focus();
          return false;
        else if(hght <2 || > 7){
            alert("please enter your height in feet in inches in following format: x.y");
            return false;
    }

      }

      if (wght.value == "")
    {
        alert("This field cannot be left blank");
        wght.focus();
        return false;
        else if(weight < 0){
        alert("please enter a valid weight in pounds.");
        return false;
    }
    }

      if (sal.value == "")
    {
        alert("This field cannot be left blank.");
        sal.focus();
        return false;
        else if(sal.val.indexOf("$") != 0){
            alert("Please insert a dollar sign in the beginning of the entry");
            return false;
        }
            else if(sal.val <0 || >999999.99){
                alert("Please re-enter your salary");
                return false;
            }
    }


      if (email.value == "")
    {
        alert("Please enter your email address.");
        email.focus();
        return false;
    }
    else{
    return true;
    }
}
</script>

我已经使用chrome和IE进行了测试，但没有运气。有人能告诉我哪里出了问题吗？或者我可以尝试用不同的方法来让这份表格发挥作用吗？

您有两个<form>标记。将第二个移动到第一个所在的位置，然后删除现在的第一个。

<form name="myForm" action="mailto:example@yourdomain.com" method="post" onsubmit="return Validate();">
<table width="250" border="0" align="left" >
<tr>
<td>
<table width="100%" border="0" >
<tr>
<td colspan="3"><center><strong>Please Fill Out the Information Below</strong></center></td>
</tr>
<tr>

编辑后添加：您也有一堆验证错误，主要是由于嵌套的标记不正确。在HTML出现问题的情况下，要做的第一件事就是使用http://validator.w3.org并修复错误。

另一个编辑：您已经对var fName = document.myForm.fName;进行了编码，但在HTML中没有这样的东西。与其他变量声明类似。查找document.getElementById()方法并使用它来声明变量指针。

相关文章：