iT邦幫忙

DAY 13
5

上一篇文章: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. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#12--HTML5輸入驗證,(新)表單元件
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#14--AJAX ( XHR,XmlHttpRequest)
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言