Javascript的表单与验证-非空验证

2023年6月10日下午6:22 • JavaScript

现在我来为您讲解一下“Javascript的表单与验证-非空验证”的完整攻略。

1. 标题

首先，我们需要为这篇攻略添加一个合适的标题，以便读者能够清楚地了解这篇攻略的主题。标题可以设为“Javascript表单验证-非空验证”。

2. 简介

在正式开始讲解“Javascript表单验证-非空验证”之前，我们先来简单介绍一下表单验证的概念及其重要性。

表单验证是指在用户提交表单数据之前，对表单数据进行验证，以确保其符合要求，从而减少错误数据的提交和对服务器的损害。表单验证的重要性在于，它可以提高用户体验和安全性，并减少数据处理的压力。

在表单验证中，非空验证是最基本的一种验证规则，它通常用于检查表单中的必填项是否为空。本文将详细介绍如何使用Javascript进行非空验证。

3. 示例说明

以下我们将通过两个示例说明如何使用Javascript进行非空验证。

示例1

我们先来看一个简单的示例，在这个表单中，我们需要验证用户是否填写了用户名和密码：

<form name="myForm" onsubmit="return validateForm();" method="post">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" /><br />

  <label for="password">密码：</label>
  <input type="password" name="password" id="password" /><br />

  <input type="submit" value="提交" />
</form>

<script>
  function validateForm() {
    var username = document.forms["myForm"]["username"].value;
    var password = document.forms["myForm"]["password"].value;
    if (username == "" || password == "") {
      alert("用户名和密码不能为空！");
      return false;
    }
  }
</script>

该示例中，我们在表单提交时调用了validateForm()函数，该函数通过DOM获取了表单中的用户名和密码，然后判断这两个字段是否为空。如果为空，则弹出提示框并返回false，阻止表单的提交。否则，如果两个字段都有值，则可以提交表单。

示例2

我们再来看一个稍微复杂一些的示例，在这个表单中，我们需要验证用户是否填写了邮箱和手机号，并且需要对手机号进行格式验证：

<form name="myForm" onsubmit="return validateForm();" method="post">
  <label for="email">邮箱：</label>
  <input type="text" name="email" id="email" /><br />

  <label for="mobile">手机号：</label>
  <input type="text" name="mobile" id="mobile" /><br />

  <input type="submit" value="提交" />
</form>

<script>
  function validateForm() {
    var email = document.forms["myForm"]["email"].value;
    var mobile = document.forms["myForm"]["mobile"].value;
    var phoneReg = /^1[3-9][0-9]{9}$/;
    if (email == "" || mobile == "") {
      alert("邮箱和手机号不能为空！");
      return false;
    }
    if (!phoneReg.test(mobile)) {
      alert("手机号格式不正确！");
      return false;
    }
  }
</script>

该示例与前一个示例类似，但多了一个对手机号格式的验证。我们使用了正则表达式对手机号进行格式检查，如果手机号格式不正确，则弹出提示框并返回false，阻止表单的提交。