MIS2000Lab.的「HTML5 認證考試，從零開始」#13--採用JavaScript進行驗證

DAY 13

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 13 篇

javascript html asp.net 網頁 expression 驗證鐵人賽 regular html5 mis2000lab 正規表達式輸入驗證 validate html

mis2000lab

2014-10-08 09:47:13

5521 瀏覽

分享至

上一篇文章：http://ithelp.ithome.com.tw/question/10158551

上一篇文章提到「輸入驗證」，而且透過HTML5新的表單元件、屬性
可以做到很多事情（跟傳統HTML表單比起來，真的進步太多）

不過，學習寫程式來做驗證，也是逃避不了的！

驗證，可以的話，讓瀏覽器（在使用者的電腦上）完成
不要回去騷擾Web Server

因為JavaScript是在使用者電腦上的「瀏覽器」運作，所以不需要把資料傳回Web Server，
可以節省伺服器資源與網路頻寬。

有錯誤就立刻呈現、不需等待，如此一來也改善了使用者經驗。

在HTML表單裡面，都會有一個送出按鈕（<input type=submit>）。當您填寫完畢後可以把資料送出，作下一階段的處理。

<form id="Form1" method="post" action="test.aspx" 
Name=”Form111” onsubmit="return checkData();" >

<input type=”text” name="email" />
<input type="submit" value="送出按鈕" />

</form>


<script type="text/javascript">
// 註解：自己撰寫額外的JavaScript來進行資料的驗證動作。
// 下面的Form111是指表單<form>的name名稱。emai是文字輸入方塊<input>的name名稱。
function checkData() {
  with (document.Form111) {
     if (email.value.length == 0) {
alert("不可留白。請輸入您的 E-Mail");
        return false;
// 在HTML5可用required屬性來取代這一段程式。
      } 
else {
 i = email.value.indexOf("@");
 if (i <= 0) {
alert("您輸入的 E-mail 不正確 !沒有＠符號");
return false;
}
      }
   }  
}
</script>

==== 處理輸入事件 ====

如同上述的範例，表單輸入完成後，您會按下一個送出（Submit）按鈕將網頁輸入資料送到後端（Web Server）處理，

因此下面的範例會用到 onsubmit=”函式名稱”，代表送出資料以後會進行的JavaScript驗證。

<form id="Form111" method="post" 
action="registration.aspx" 
onsubmit="return validateForm();" >
...（省略）...
<input type="submit" Value=”確定（送出）” />
</form>


<script type="text/javascript">
// 註解：自己撰寫額外的JavaScript來進行資料的驗證動作。
function validateForm() {
...（省略）...
}
</script>

==== 驗證輸入（必須是數字） ====

這裡使用了正規表達式（上一篇文章有提到）

您可以看見程式裡面的那一段 /^\s*(\+|-)?\d+\s*$/

<form id="scoreForm" method="post"
action="..." 
onsubmit="return validateForm();" >
...（省略）...
<div id="scoreField" class="field" >
Score: <input id="score" name="score" type="number" />
</div>
...（省略）...
</form>

<script type="text/javascript">
function isAnInteger(text){
var intTestRegex = /^\s*(\+|-)?\d+\s*$/;
return String(text).search(intTestRegex) != -1;
}

function validateForm()
{
if( !isAnInteger(document.getElementById('score').value))
return false;  // 驗證失敗

return true;
}
</script>

從這些範例裡面，我們可以發現道：
自己寫JavaScript或是jQuery程式固然靈活、多變化

但**上一篇文章介紹的正規表達式(Regular Expression)**，也可以更精簡地作到這些「輸入文字或數字」的驗證
而且更簡潔！

微軟官方網站，這篇文章超詳細的 http://msdn.microsoft.com/zh-tw/library/hs600312(v=vs.110).aspx

什麼時候該採用哪種技巧去解決問題？

或許更值得我們深思？

下一篇文章：使用XHR / XmlHttpRequest撰寫AJAX

http://ithelp.ithome.com.tw/question/10158950

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯