javascript表单验证使用示例(javascript验证邮箱)

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

下面就为您详细讲解“javascript表单验证使用示例(javascript验证邮箱)”的完整攻略。

一、表单验证的基本原理

表单验证是指对用户提交的表单数据进行校验，以保证数据的合法性和完整性。在前端开发中，常用的表单验证方式包括：

HTML表单验证：利用HTML表单的标准属性和属性值，来对表单数据进行校验和限制；
javascript表单验证：利用javascript来对表单数据进行校验和限制。

HTML表单验证的优点是简单易用，缺点是只能对基本的表单数据类型进行校验，例如必填项、邮件地址、电话号码等。而javascript表单验证相对于HTML表单验证来说，具有更强的灵活性和可扩展性，可以对复杂的表单数据类型进行校验和限制。

二、使用javascript验证邮箱的流程

下面我们以验证邮箱为例，来介绍如何使用javascript进行表单验证的流程。

1. HTML代码示例

<form id="emailForm" action="" method="post" onsubmit="return checkEmail()">
  <label for="email">请输入邮箱地址：</label>
  <input type="text" id="email" name="email" />
  <input type="submit" value="提交" />
</form>

在HTML代码中，我们设置了一个id为“emailForm”的表单元素，它包含一个label标签和一个文本输入框。在提交表单时，我们调用了一个名为“checkEmail”的javascript函数。该函数的主要作用是校验邮箱地址是否合法。

2. javascript代码示例

<script type="text/javascript">
  function checkEmail() {
    var email = document.getElementById("email").value;
    if(email=="" || email.indexOf("@")==-1 || email.indexOf(".")==-1) {
      alert("邮箱地址格式不合法！");
      return false;
    }
    return true;
  }
</script>

在javascript代码中，我们定义了一个名为“checkEmail”的函数。该函数首先通过document.getElementById("email")方法获取到名为“email”的输入框元素，然后通过value属性获取到用户输入的邮箱地址。

接下来，我们使用了if语句对邮箱地址进行了校验。其中，“email==""”用来判断邮箱地址是否为空；“email.indexOf("@")==-1”用来判断邮箱地址中是否包含“@”字符；“email.indexOf(".")==-1”用来判断邮箱地址中是否包含“.”字符。只有当这三个条件都满足时，才返回true，表示验证通过，否则返回false，表示验证失败。

最后，在HTML代码中的“onsubmit”属性中调用该函数，若该函数返回true，则表单被提交，否则表单不会被提交，并弹出一条警告框。