驗證控制項

本專題的 Web 控制項驗證是採用用戶端驗證的方式，用戶端驗證可讓使用 者使用用戶端指令碼(Client Script)來進行驗證，由於控制項能夠立即回應(不需要 往返於伺服器)，網頁的執行效率將可有效提升，因此，本專題大致上用到 RequiredFieldValidator 驗證控制項、CompareValidator 驗證控制項、

RegularExpressionValidator 驗證控制項、CustomValidator 驗證控制項和 ValidationSummary 驗證控制項，各驗證控制項的說明如下所示：

1. RequiredFieldValidator 驗證控制項

RequiredFieldValidator 驗證控制項可以用來檢查所指定之控制項是否沒有輸 入資料或選取選項，以下我以新增學生資料的網頁為例(驗證必須輸入之欄位)。

圖 4.2 新增學生資料之錯誤畫面(一)

※主要處理程序如下：

<asp:requiredfieldvalidator id="Requiredstu_name" runat="server"

ControlToValidate="stu_name" Display="Dynamic"

ErrorMessage="請輸入學生姓名!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredsex" runat="server"

ControlToValidate="sex" Display="Dynamic" ErrorMessage="請選擇性別!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredfieldstu_num" runat="server"

ControlToValidate="stu_num" Display="Dynamic"

ErrorMessage="請輸入學號!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requireddelegacy" runat="server"

ControlToValidate="delegacy" Display="Dynamic"

ErrorMessage="請選取學部!" InitialValue="請選擇...">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredcollege" runat="server"

ControlToValidate="college" Display="Dynamic"

ErrorMessage="請選取學院!" InitialValue="請選擇...">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requireddepartment" runat="server"

ControlToValidate="department" Display="Dynamic"

ErrorMessage="請選取系所!" InitialValue="請選擇...">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredgrade" runat="server"

ControlToValidate="grade" Display="Dynamic"

ErrorMessage="請選取年級!" InitialValue="請選擇...">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredclasses" runat="server"

ControlToValidate="classes" Display="Dynamic"

ErrorMessage="請選取班別!" InitialValue="請選擇...">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredstu_id" runat="server"

ControlToValidate="stu_id" Display="Dynamic"

ErrorMessage="請輸入身分證字號!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredtelephone" runat="server"

ControlToValidate="telephone" Display="Dynamic"

ErrorMessage="請輸入聯絡電話!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredpostcode" runat="server"

ControlToValidate="postcode" Display="Dynamic"

ErrorMessage="請輸入郵遞區號!">

</asp:requiredfieldvalidator>

<asp:requiredfieldvalidator id="Requiredaddress" runat="server"

ControlToValidate="address" Display="Dynamic"

ErrorMessage="請輸入聯絡地址!">

</asp:requiredfieldvalidator>

程式 4.3 新增學生資料錯誤驗證之部分程式(一)

2. CompareValidator 驗證控制項

CompareValidator 驗證控制項可以用來比較兩個控制項的值，或是和一個指 定的常數值進行比較，以下我以更改登入密碼的網頁為例(驗證新密碼和確認新 密碼欄位)。

圖 4.3 更改登入密碼之錯誤畫面

※主要處理程序如下：

<asp:CompareValidator id="Comparecheck_new_pass" runat="server"

ErrorMessage="「確認新密碼」與「新密碼」必須要完全相同 !"

Display="Dynamic" ControlToValidate="check_new_pass"

ControlToCompare="new_pass">

</asp:CompareValidator>

程式 4.4 更改登入密碼錯誤驗證之部分程式

3. RegularExpressionValidator 驗證控制項

RegularExpressionValidator 驗證控制項是使用正規語言的範本字串比對控制 項的值，以下我以新增學生資料的網頁為例(驗證學號及聯絡電話欄位)。

圖 4.4 新增學生資料之錯誤畫面(二)

※主要處理程序如下：

<asp:regularexpressionvalidator id="Regularexpressionvalidator1" runat="server"

ControlToValidate="stu_num" Display="Dynamic"

ErrorMessage="請輸入正確的學號!" ValidationExpression="[A-Za-z]{1}\d{7}">

</asp:regularexpressionvalidator>

<asp:regularexpressionvalidator id="RegularExpressiontelephone" runat="server"

ControlToValidate="telephone" Display="Dynamic"

ErrorMessage="請依格式輸入電話號碼!"

ValidationExpression="[0]{1}\d{1,}-\d{7,}">

</asp:regularexpressionvalidator>

程式 4.5 新增學生資料錯誤驗證之部分程式(二)

4. CustomValidator 驗證控制項

CustomValidator 驗證控制項可以用來建立伺服器端或用戶端欄位驗證功 能，他允許程式設計師自行撰寫程序來驗證控制項的值，以下我以新增學生資料 的網頁為例(驗證身份證字號欄位)。

圖 4.5 新增學生資料之錯誤畫面(三)

※主要處理程序如下：

<asp:customvalidator id="Customstu_id" runat="server"

ControlToValidate="stu_id" Display="Dynamic"

ErrorMessage="請輸入正確的身份證字號!"

ClientValidationFunction="stu_id_check"> //採用 stu_id_check()副程序來驗證

</asp:customvalidator>

<script language="javascript">

function stu_id_check(source,args) //身分證字號驗正副程序 {

var tid = args.Value.toUpperCase();

if (tid.length !=10){args.IsValid = false;return;}

var ch = tid.charAt(0);

if (ch < 'A' || ch > 'Z'){args.IsValid = false;return;}

if (tid.charAt(1) < '1' || tid.charAt(1) > '2'){args.IsValid = false;return;}

for (var i=2;i<=9;i++){

if(tid.charAt(i) < '0' || tid.charAt(i) > '9'){args.IsValid = false;return;}}

var chksum=0;

var alphabet ="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var chv = alphabet.indexOf(ch)+65;

if (ch>='A' && ch<='H')

{chksum=Math.floor((chv-55)/10)+((chv-55)%10)*9;}

else if (ch>='J' && ch<='N')

{chksum=Math.floor((chv-56)/10)+((chv-56)%10)*9;}

else if (ch>='P' && ch<='V')

{chksum=Math.floor((chv-57)/10)+((chv-57)%10)*9;}

else switch(ch){

case 'X' : chksum=3; break;case 'Y' : chksum=12; break;

case 'W' : chksum=21; break;case 'Z' : chksum=30; break;

case 'I' : chksum=39; break;case 'O' : chksum=48; break;}

var ArabicNumber ="0123456789";

for (i=1;i<=8;i++)

{chksum += ArabicNumber.indexOf(tid.charAt(i))*(9-i);}

chksum += ArabicNumber.indexOf(tid.charAt(9));

if (chksum%10 == 0){args.IsValid = true;}else{args.IsValid = false;}

}

</script>

程式 4.6 新增學生資料錯誤驗證之部分程式(三)

5. ValidationSummary 驗證控制項

ValidationSummary 驗證控制項是用來顯示驗證錯誤的摘要資訊，也就是將 所有驗正錯誤訊息以摘要方式顯示，在本專題中，所有的錯誤驗證控制項皆配合 ValidationSummary 驗證控制項來使用，以下我以新增學生資料的網頁為例。

※主要處理程序如下：

<asp:validationsummary id="ValidationSummary1" style="Z-INDEX: 107; LEFT:

568px; POSITION: absolute; TOP: 680px" runat="server" Width="153px"

//採用訊息方塊來摘要顯示錯誤訊息