郵箱格式驗證

admin發表於2019-03-29

郵箱自然是有固定格式的，在提交表單的時候通常需要進行驗證。

首先看一段JavaScript實現的驗證程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style> 
<script>
window.onload=()=>{
  let emailCheck=(email)=> {
    let re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
    if (re.test(email)) {
      return true;
    } else {
      return false;
    }
  }
  let email=document.getElementById("email");
  let obt=document.getElementById("bt");
  obt.onclick=()=>{
    if(!emailCheck(email.value)){
      alert("email格式錯誤");
    }
  }
}  
</script> 
</head>
<body>
<form action="#" method="post">
  <input type="email" id="email"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上面程式碼通過JavaScript實現了郵箱格式驗證效果，比較繁瑣。

HTML5提供的方式非常簡便，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style>  
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="email" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

只要將type屬性值修改"email"即可，如果格式不對，提交表單會彈出提示。

相關文章