HTML 表單驗證概述

admin發表於2018-11-02
HTML

當前只要稍微規範一些的網站，在提交表單資訊的時候都會進行格式驗證。

比如驗證使用者名稱密碼是否為空、郵箱格式是否正確，或者身份證格式是否規範。

通常表單驗證分為兩層：

（1）.前端表單驗證，與使用者有良好的互動介面，但是並不安全，因為JavaScript可以被禁用。

（2）.後臺表單驗證，除了前端的驗證以外，為了保證安全，後臺程式碼還會進行一層驗證。

本文並不關心後臺是如何實現驗證的，只介紹前臺實現的驗證功能。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function checkForm(form) {
  let reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  if(form.username.value == "") {
    alert("使用者名稱不能為空!");
    form.username.focus();
    return false;
  }
  if(form.password.value == "") {
    alert("密碼不能為空!");
    form.password.focus();
    return false;
  }
  if(form.email.value==""){
    alert("郵箱不能為空!");
    form.email.focus();
    return false;
  }else if(!reg.test(form.email.value)){
    alert("郵箱格式不正確!");
    form.email.focus();
    return false;
  }
  return true;
}
window.onload = function () {
  var myform = document.forms[0];
  myform.onsubmit = function () {
    return checkForm(this);
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  姓名：<input type="text" name="username"/><br/>
  密碼：<input type="password" name="password" /><br/>
  郵箱：<input type="text" name="email" /><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上述程式碼利用JavaScript實現了表單驗證功能。

程式碼分析如下：

（1）.點選提交按鈕之後，會對錶單元素內容進行正確性驗證。

（2）.對使用者名稱和密碼進行value是否為空驗證，對郵箱同時進行是否為空和郵箱格式驗證。

HTML5之前，前端表單驗證必須要結合JavaScript，技術的進步通常是為了滿足人懶惰的天性，HTML5也體現了這一點，大量簡單的表單驗證效果是HTML5內建，無需我們書寫JavaScript程式碼。

程式碼演示如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form action="#" method="post">
  姓名：<input type="text" name="username" required/><br/>
  密碼：<input type="password" name="password" required /><br/>
  郵箱：<input type="email" name="email" required /><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上述程式碼沒有一段JavaScript程式碼，但是實現了比較良好的表單驗證功能。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193822a91grps1nawwo5va.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.表單元素value值不為空，那麼只要在對應元素新增required屬性即可。

（2）.如果要實現郵箱格式驗證，只要將type屬性值修改為email。

最後總結：

雖然HTML5自帶的表單驗證功能極大提高了工作效率，然而往往免費的東西不是最好的。

所以在一些驗證需求要求較高的情況下，還需要進行自定義。

後續的文章將會對HTML5自帶驗證共和自定義驗證功能進行詳細介紹。

相關文章