无法使用javascript验证html表单

我正在尝试在提交前验证表单。以下是验证约束：

• 名称、地址不应为空
• 电话号码应为任意10位数字
• 电子邮件应为有效的电子邮件地址
• 应从下拉列表中选择一个首选项
• 至少应选择一种爱好
• 一旦用户选择日期，其年龄应显示在 年和月，就在输入字段旁边

如果验证中存在错误，则不应提交数据，错误消息应出现在相应的输入字段旁边，并且用户输入的内容应仍然可见（页面不应刷新），以便用户可以修改输入。这是我的表格

<form name="f1" action="#" onsubmit="return validateForm()">
  <div class="container">
    <div class="row my-1">
      <div class="col-md-2">
        Name :
      </div>
      <div class="col-md-10">
        <input type="text" name="name" id="name"/>
        <span id="namevald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        Address :
      </div>
      <div class="col-md-10">
        <textarea name="address" id="address"></textarea>
        <span id="addressvald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        Phone :
      </div>
      <div class="col-md-10">
        <input type="tel" name="phone" id="phone"/>
        <span id="phonevald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        Email :
      </div>
      <div class="col-md-10">
        <input type="text" name="email" id="email"/>
        <span id="emailvald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        Preferences :
      </div>
      <div class="col-md-10">
        <select name="preferences" id="preferences">
          <option value="" selected>Select a preference..</option>
          <option value="pref1">Preference 1</option>
          <option value="pref2">Preference 2</option>
          <option value="pref3">Preference 3</option>
          <option value="pref4">Preference 4</option>
          <option value="pref5">Preference 5</option>
          <option value="pref6">Preference 6</option>
          <option value="pref7">Preference 7</option>
          <option value="pref8">Preference 8</option>
          <option value="pref9">Preference 9</option>
          <option value="pref10">Preference 10</option>
        </select>
        <span id="preferencesvald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        Hobbies :
      </div>
      <div class="col-md-10">
        <ul>
          <li><label for="chk1"><input type="checkbox" name="chk" id="chk1">First</label></li>
          <li><label for="chk2"><input type="checkbox" name="chk" id="chk2">Second</label></li>
          <li><label for="chk3"><input type="checkbox" name="chk" id="chk3">Third</label></li>
          <li><label for="chk4"><input type="checkbox" name="chk" id="chk4">Fourth</label></li>
          <li><label for="chk5"><input type="checkbox" name="chk" id="chk5">Fifth</label></li>
        </ul>
        <span id="hobbiesvald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-2">
        DOB :
      </div>
      <div class="col-md-10">
        <input type="date" name="date" id="date" onchange="ageCalculate()"/>
        <span id="datevald"></span>
      </div>
    </div>
    <div class="row my-1">
      <div class="col-md-12">
        <input type="submit" value="Submit.."/>
      </div>
    </div>
  </div>
</form>

姓名：
地址:
电话：
电邮：
偏好：
选择一个首选项。。
偏好1
偏好2
偏好3
偏好4
偏好5
偏好6
偏好7
偏好8
偏好9
偏好10
业余爱好：

首先
第二
第三
第四
第五

出生日期：

这是我的javascript

function validateHobbies(){
            var chklist = document.getElementsByName('chk');
            var n = chklist.length;
            for(var i = 0; i < n; i++){
                if(chklist[i].checked) return true;
            }
            return false;
        }
        function validatePreferences(){
            var e = document.getElementByID('preferences');
            return (e.options[e.selectedIndex].value == "")? false : true;              
        }
        function validatePhone(){
            var pat = /\d+$/;
            return (pat.test(document.getElementByID('phone').value))? true : false;
        }
        function validateAddress(){
            return (document.getElementByID('address').value.trim() == "")? false : true;
        }
        function validateName(){
            return (document.getElementByID('name').value.trim() == "")? flase : true;
        }
        function validateEmail(){
            var pat = /^[a-z0-9!#$%&*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
            return (pat.test(document.getElementByID('email').value))? true : false;
        }
        function validateForm(){
            var isNameValid = validateName();
            var isAddressValid = validateAddress();
            var isPhoneValid = validatePhone();
            var isPreferencesValid = validatePreferences();
            var isHobbiesValid = validateHobbies();
            var isEmailValid = validateEmail();
            document.getElementByID('namevald').innerHTML = (isNameValid)? "" : "Name shouldn't be empty";
            document.getElementByID('addressvald').innerHTML = (isAddressValid)? "" : "Address shouldn't be empty";
            document.getElementByID('phonevald').innerHTML = (isPhoneValid)? "" : "Enter valid mobile no";
            document.getElementByID('preferencesvald').innerHTML = (isPreferencesValid)? "" : "Select a preference";
            document.getElementByID('hobbiesvald').innerHTML = (isHobbiesValid)? "" : "Select atleast 1 hobby";
            document.getElementByID('emailvald').innerHTML = (isEmailValid)? "" : "Enter a valid email";
            return (isNameValid && isAddressValid && isPhoneValid && isPreferencesValid && isHobbiesValid && isEmailValid);
        }
        function ageCalculate(){
            var dob = document.getElementByID('date').value.split("-");
            var by = parseInt(dob[0],10);
            var bm = parseInt(dob[1],10);
            var today = new Date();
            var cy = today.getFullYear();
            var cm = today.getMonth();
            var months = (cy-by)*12-bm+cm;
            document.getElementByID('datevald').innerHTML = "" + months/12 + "Years" + months%12 + "Months";
        }

函数validateHobbies（）{
var chklist=document.getElementsByName（'chk'）；
var n=chklist.length；
对于（变量i=0；i

---

验证不起作用。不管输入是什么，表单只是提交和刷新。也没有验证错误消息。我怀疑错误可能在表单开始标记的onsubmit属性中，也可能在最后的submit类型输入中，所以我尝试了event.preventDefault（）和我在网上找到的表单标记和submit按钮的多个其他解决方案，但似乎都不起作用。这里到底有什么问题？提前感谢。

您可以使用HTML5验证表单。只需将required添加到输入标记中。对于电子邮件验证，您必须添加类型属性，并将“email”作为值

<input type="email" name="email" required />

---

因此，首先，您的JavaScript中有两个输入错误，即getElementByID，请小心，它应该是getElementByID，注意小写D，其次，您做了另一个输入错误“flase，它应该是false。这是我所做的解决方案，我实际上没有改变您所实现的任何逻辑，只是纠正了您在代码中遇到的非常小的问题

我个人建议，无论何时提交表单并在JS中执行某些操作，为了进行测试，请使用preventDefault（）。纯粹是因为它没有提交表单，这就是为什么你看不到

document.getElementByID

document.getElementById

function validateForm(evt){

evt.preventDefault();