JavaScript中的E-mail 地址格式驗證

更新時間：2018年03月28日 15:10:26 作者：賈繼康

本文給大家分享JavaScript中的E-mail 地址格式驗證，項目要求輸入的數據必須包含@符號和點號。代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

最近做了一個前端的項目，要求：輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號。

1：代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用JavaScript驗證是否符合電子郵箱地址</title>
</head>
<script type="text/javascript">
  // 創(chuàng)建第一個函數validate_emil()并包含兩個參數
  function validate_email(field, alerttxt) {
    with (field) {
      //利用indexOf() 方法返回某個指定的字符串值在字符串中首次出現(xiàn)的位置--定義一個變量apos將第一次出現(xiàn)的“@”賦值給apos
      apos = value.indexOf("@");
      //利用lastIndexOf() 方法返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索--
      //stringObject.lastIndexOf(searchvalue,fromindex)
      //fromindex 可選的整數參數。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的最后一個字符處開始檢索。
      dotpos = value.lastIndexOf(".");
      // 判斷符合"@"的位置，或者"."的位置是否在"@"的后面
      if (apos < 1 || dotpos - apos < 2) {
        // 利用alert()彈出一個警告窗來執(zhí)行alerttxt的操作
        // 郵箱地址不符合
        alert(alerttxt);
        return false;
      } else {
        // 郵箱地址符合
        return true;
      }
    }
  }
  // 創(chuàng)建第二個函數validate_form()并包含一個參數
  function validate_form(thisform) {
    with (thisform) {
      if (validate_email(email, "Not a valid e-mail address!") == false) {
        // 利用focus()將輸入焦點移至對象上
        email.focus();
        return false;
      }
    }
  }
</script>
<body>
  <!-- onsubmit是一個驗證表單功能,為true提交， -->
  <form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit">
  </form>
</body>
</html>

2：結果

這里寫圖片描述