Javascript的form表单校验输入框

以下是HTML代码：

 <form name="myForm" onsubmit="return validateForm()">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>
 
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email"><br>
 
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age"><br>
 
    <label for="phone">电话号码：</label>
    <input type="tel" id="phone" name="phone"><br>
 
    <label for="address">地址：</label>
    <input type="text" id="address" name="address"><br>
 
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
 
    <input type="submit" value="提交">
  </form>

以下是js实现：

 function validateForm() {
      var name = document.forms["myForm"]["name"].value;
      var email = document.forms["myForm"]["email"].value;
      var age = document.forms["myForm"]["age"].value;
      var phone = document.forms["myForm"]["phone"].value;
      var address = document.forms["myForm"]["address"].value;
      var username = document.forms["myForm"]["username"].value;
 
      if (name == "") {
        alert("请填写姓名");
        return false;
      }
 
      if (email == "") {
        alert("请填写电子邮件");
        return false;
      } else {
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
          alert("请输入有效的电子邮件地址");
          return false;
        }
      }
 
      if (age == "") {
        alert("请填写年龄");
        return false;
      } else {
        if (isNaN(age) || age < 0 || age > 120) {
          alert("请输入有效的年龄");
          return false;
        }
      }
 
      if (phone == "") {
        alert("请填写电话号码");
        return false;
      } else {
        var phonePattern = /^\d{11}$/;
        if (!phonePattern.test(phone)) {
          alert("请输入有效的电话号码（11位数字）");
          return false;
        }
      }
 
      if (address == "") {
        alert("请填写地址");
        return false;
      }
 
      if (username == "") {
        alert("请填写用户名");
        return false;
      }
 
      return true;
    }

定义了一个名为validateForm的JavaScript函数，该函数用于验证表单数据。在函数中，首先获取每个输入框的值，然后逐一进行验证。

对于每个输入框，我们使用条件语句来检查其值是否满足特定要求，并在不符合要求时显示警告框并返回false以阻止表单提交。例如，如果姓名字段为空，则显示警告框并返回false。同样地，我们使用正则表达式来验证电子邮件和电话号码的格式，使用比较运算符来验证年龄的范围。

在HTML部分，我们将每个输入框与相应的标签进行关联，并在表单元素上添加了onsubmit事件来调用validateForm函数。如果所有输入框的值都通过验证，将允许表单提交；否则，将阻止表单提交。