JavaScript 只验证第一个字段

JavaScript only validating the first field

本文关键字:字段 第一个 验证 JavaScript      更新时间:2023-09-26

所以基本上我正在尝试创建一个输入框列表,每个输入框都需要在提交之前进行验证。我是JavaScript和HTML的一个非常基本的初学者,并且希望任何输入,因为只有第一个表单正在验证。只要名字中有字母字符,它就会提交。

  <p><b> Forename: </b></p>
  <input type="text" size="32" name="frmForename" placeholder="Dylan">
  <p><b> Surname: </b></p>
  <input type="text" size="32" name="frmSurname" placeholder="Owen">
  <p><b> Gender: </b></p>
  <input type="radio" name="frmGender" value="male"> Male
  <input type="radio" name="frmGender" value="female"> Female
  <p><b> Date of Birth:</b><p>
  <input type ="text" size="32" name="frmDateOfBirth" placeholder="DD/MM/YYYY">
  <p><b> Age: </b></p> 
  <input type ="text" size="32" name="frmAge" min="12" max="150" placeholder="Enter Your Age">
  <p><b> Course: </b></p> <select name="frmCourse" id="frmCourse">
  <option value="select">Select Your Course</option>
  <option value="databases">Databases</option>
  <option value="websites">Websites</option>
  <option value="networks">Networks</option>
  </select>
  <p><input type="submit" value="Enter Details" onclick=" return checkForm(); checkForm2();">
     <input type="reset" value="Clear Form" onclick="return confirm_reset();">
     <button onclick="goBack()">Back</button> </p>
  <font size="3" color="red">All forms <u>must</u> be complete.</font> 
  <p><b> Date Registered: </b></p>
  <input type="text" size="55" id="dateReg" readonly/>

</form>
</body>

JavaScript

    <script language="javascript" type="text/javascript">
  document.bgColor="LightSteelBlue";
</script>

<script type="text/javascript">
  function checkForm(form)
  {
    //****FORENAME****
    // VALIDATE: No Characters
    if(form.frmForename.value == "") {
      alert("Error: Enter your forename.");
      form.frmForename.focus();
      return false;
    }
    // regular expression to match only alphanumeric characters and spaces
    var re = /^[A-Za-z]+$/;
    // VALIDATE: Does the entered text match the expression above?
    if(!re.test(form.frmForename.value)) {
      alert("Error: Cannot use numerical characters.");
      form.frmForename.focus();
      return false;
    }
    // validation was successful
    return true;
  }
  </script>
  <script>
    function checkForm2(form)
    //****SURNAME****
    if(form.frmSurname.value == "") {
      alert("Error: Enter your surname.");
      form.frmSurname.focus();
      return false;
    }
    // regular expression to match only alphanumeric characters and spaces
    var re = /^[A-Za-z]+$/;
    // VALIDATE: Does the entered text match the expression above?
    if(!re.test(form.frmSurname.value)) {
      alert("Error: Cannot use numerical characters.");
      form.frmSurname.focus();
     return false;
    }
    // validation was successful
    return true;
  }
</script>
<script>
function getDate() {
document.getElementById('dateReg').value= Date();
}
</script>

<script>
function confirm_reset() {
    return confirm("Are you sure?");
}
</script>
<script>
function goBack() {
  return confirm("Are you sure?");
  window.history.back();
}
</script>
<script>
if(form.frmDateOfBirth.value == "") {
      alert("Error: Date Of Birth is empty!");
      form.frmDateOfBirth.focus();
      return false;
    }
  re = /^('d{1,2})/('d{1,2})/('d{4})$/;
    if(form.frmDateOfBirth.value != '') {
      if(regs = form.frmDateOfBirth.value.match(re)) {
        if(regs[1] < 1 || regs[1] > 31) {
          alert("Invalid value for day: " + regs[1]);
          form.frmDateOfBirth.focus();
          return false;
        }
        if(regs[2] < 1 || regs[2] > 12) {
          alert("Invalid value for month: " + regs[2]);
          form.frmDateOfBirth.focus();
          return false;
        }
        if(regs[3] < 1913 || regs[3] > (new Date()).getFullYear()) {
          alert("Invalid value for Date Of Birth: " + regs[3] + " - must be between 1913 and " + (new Date()).getFullYear());
          form.frmDateOfBirth.focus();
          return false;
        }
      } else {
        alert("Invalid date format: " + form.frmDateOfBirth.value);
        form.frmDateOfBirth.focus();
        return false;
      }
    }
</script>
<script>
function validateCourse() {
 var x = document.forms["frmCourse"]["frmCourse"].value;
     if (x == "select") {
         alert("Please select a course.");
         return false;
     }
  }
</script>

这一行:

  onclick=" return checkForm(); checkForm2();

意味着如果 checkForm 返回 false(当 form.frmForename.value == " 时会这样做),则 false 与返回 checkForm() 中的返回一起使用,并且 click 事件被取消,因此表单不会提交。然后调用 checkForm2(),但此时按钮单击已被取消。

此外,无需将每个函数分离到其自己的<脚本>元素中。您还应该使用 form.submit 事件,而不是 button.click 事件,并且您不应该使用内联事件处理程序 (on...),而应该使用标准 element.addEventListener()。