Javascript的form表单校验输入框

以下是HTML代码：

 
    姓名：
    


    电子邮件：
    


    年龄：
    


    电话号码：
    


    地址：
    


    用户名：
    


    
  

以下是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  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函数。如果所有输入框的值都通过服务器托管网验证，将允许表单提交；否则，将阻止表单提交。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net