第四章 基本資料輸入及錶單驗證在上一章我們建立好瞭資料庫 在這個章節我們要建立輸入錶單以及驗證錶單資料。下圖是我們建立好的輸入錶單 [卡國17天傳說#4] ASP會員管理 第四章 資料輸入及錶單驗證 - 趣味新聞網

發表日期 2009-05-15T22:43:58+08:00

     本帖最後由 mayday03225 於 2009-5-17 00:26 編輯

第四章 基本資料輸入及錶單驗證
在上一章我們建立好瞭資料庫，在這個章節我們要建立輸入錶單以及驗證錶單資料。
下圖是我們建立好的輸入錶單，程式碼請各位直接打開附檔來看。


在送齣資料前我們需要做資料的驗證。為什麼要驗證?
比如說我們有個欄位要輸入生日68年5月7日，如果我們不加驗證，直接把輸入的資料抓來用，會發生怎麼情況呢?680507，68.5.7,68.05.07，甚至是西元19790507或是1979.5.7，各種不同的格式都有可能發生，若不加以驗證，依照我們規定的格式輸入的話，在資料的正確性及往後的查詢必會造成相當大的問題。

因此在按下「送齣」的同時，我們必需要進行資料的驗證。
在這邊範例中使用瞭javascript來驗證空值和正規式。

在form的標簽加上onsubmit的事件onsubmit="return checkData()"
若不符閤格式，則返迴訊息及false

舉例來說，我們定義一個手機的正規式，規則是必需全為數字組成，長度為10個數字，且為09開頭，寫法如下

//手機號碼正規式
function isMobile(s){
var str = s;
var reg = /^09d{8}$/;
return reg.test(str);
}

驗證方法如下
var Mobile = $('Mobile').value;
if(Mobile !== '' && !isMobile(Mobile)){
alert('手機號碼格式錯誤 正確格式為09開頭閤計9碼的數字組成!!');
$('Mobile').focus();
return false;
}

若不符閤格式則會跳齣以下訊息，不送齣錶單並focus在輸入手機號碼的欄位


驗證通過後再將資料送到後端進行資料的寫入。

按下送齣後，沒齣現錯誤，那應該是成功瞭吧。去資料庫看看，果然齣現瞭剛纔填入的錶單!


每新增一筆就打開資料庫看一次真是太麻煩瞭，我們需要一個列錶。
下圖是做好的列錶，除瞭基本的資料外，為瞭增加可閱讀性，也加上瞭css的滑鼠移動變色，並且把「新增」、「修改」、「刪除」的按鈕也做齣來，順便加上瞭資料筆數。


看一下前端AddMember.asp的程式碼
<input name="submit" type="submit" class="ButtonStyle" value="新增" />
<input name="submit" type="submit" class="ButtonStyle" value="修改" />
<input name="submit" type="submit" class="ButtonStyle" value="刪除" />
同一張錶單內存在著3個同名稱，類型都是submit並且各有不同的value

為什麼要這樣設計呢?

來看一下後端actListMember.asp的程式碼，這是submit後的頁麵
程式的一開始先接收前端傳來的submit值，依據取得的值再去判斷要進行的動作
<%
submit = request("submit")

Select Case submit
Case "新增"
response.Redirect("AddMember.asp")

Case "修改"

Case "刪除"

End Select
%>

這樣做的目的是不管新增、修改或刪除都是送到後端同一個檔案做處理，在管理上相當的方便。
測試一下按下新增後，進行的動作是跳轉頁麵到AddMember.asp也就是新增會員的頁麵。這樣是不是簡單多瞭!

分享鏈接