#眉標= ASP.NET 2.0
#副標=Ajax網頁開發（4）
#大標=Atlas資料驗證控制項與Behavior
#作者=文／王寧疆

===========程式==========
程式1
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<textBox targetElement="value1TextBox">
<validators>
<requiredFieldValidator errorMessage=
"姓名欄位不可以空白"/>
</validators>
</textBox>
<validationErrorLabel targetElement="validator1" associatedControl="value1TextBox" />
</components>
</page>
</script>
===========程式==========

===========程式==========
年齡:<input type="text" id="value2TextBox" />
<span id="validator2" style="color:red">*</span>
===========程式==========

===========程式==========
程式2
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<textBox targetElement="value2TextBox">
<validators>
<typeValidator type="Number" errorMessage=
"年齡必須是數字" />
<rangeValidator lowerBound="20" upperBound="60"                     
errorMessage="年齡必須是介於20~60之間的數字" />
</validators>
</textBox>
<validationErrorLabel targetElement="validator2" 
associatedControl="value2TextBox" />
</components>
</page>
</script>
===========程式==========

===========程式==========
手機:<input type="text" id="value3TextBox" />
<span id="validator3" style="color:red">*</span>
===========程式==========

===========程式==========
程式3
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<textBox targetElement="value3TextBox">
<validators>
<regexValidator regex="/\d{4}-\d{3}-\d{3}/" 
errorMessage="手機號碼的格式必須為:'
xxxx-xxx-xxx'" />
</validators>
</textBox>
<validationErrorLabel targetElement="validator3"
associatedControl="value3TextBox" />
 </components>
</page>
</script>
===========程式==========

===========程式==========
<input type="text" id="value4TextBox" />
<span id="validator4" style="color:red">*</span>
===========程式==========

===========程式==========
程式4
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<textBox targetElement="value4TextBox">
<validators>
<customValidator validateValue='onValidateValue'
errorMessage="不合法的職稱" />
    </validators>
    </textBox>
<validationErrorLabel targetElement="validator4" 
associatedControl="value4TextBox" />
</components>
</page>
</script>
===========程式==========

===========程式==========
程式5
<script type="text/javascript">
function onValidateValue(sender, eventArgs)
{
    var names = [ 'Engineer', 'Manager'];
//欄位可以接受的資料
    var valid = names.contains(eventArgs.get_value());
//判斷使用者輸入的資料是否合法
    eventArgs.set_isValid(valid);	
//呼叫eventArgs的set_isValid函數，
//並傳入驗證的結果
}
</script>
===========程式==========

===========程式==========
<input type="text" id="value5TextBox" class="input" />
===========程式==========

===========程式==========
程式6
<script type="text/javascript">
function pageLoad()
{
    var tb5 = $('value5TextBox').control;
//取得欲加上驗證功能的輸入欄位
    validator = new Web.UI.CustomValidator();
//建立CustomValidator控制項
    validator.set_errorMessage(“數字必須介於1~5之間");
//設定使用者輸入不合法的資料要顯示的錯誤訊息
    validator.validateValue.add(onValidateValue5);
//指定負責執行驗證使用者輸入資料的函數
    tb5.get_validators().add(validator);
//設定要對網頁上id屬性內容值為
//'value5TextBox'的輸入欄位進行驗證
tb5.validated.add(onvalue5TextBoxValidated);
//指定資料驗證之後欲呼叫的方法
}
</script>
===========程式==========

===========程式==========
程式7
function onValidateValue5(sender, eventArgs) 
{
    var value = parseInt(eventArgs.get_value());
//取出使用者輸入的資料
    var valid = (value < 1 || value > 5) ? false : true;
//驗證使用者輸入的資料是否是介於1~5之間的數字
    eventArgs.set_isValid(valid);	
//呼叫eventArgs的set_isValid函數，
//並傳入驗證的結果
}
===========程式==========

===========程式==========
程式8
<script type="text/javascript">
function onvalue5TextBoxValidated(sender, eventArgs)
{
    var tb5 = $('value5TextBox').control;
//取得欲加上驗證功能的輸入欄位
    if (tb5.get_isInvalid())
//如果使用者輸入的資料不合法
    {
        Web.UI.Window.messageBox
(tb5.get_validationMessage(), 
Web.UI.MessageBoxStyle.OK);
//呼叫Window類別的messageBox
//方法顯示錯誤訊息
        tb5.focus();
//將輸入集點停駐在未通過驗證的輸入欄位上
    }
}
</script>
===========程式==========

===========程式==========
程式9
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<control targetElement="panel" />
<label targetElement="hideLabel">
  <behaviors>
<clickBehavior>
  <click>
  <setProperty target="panel" property="visible"
value="false" />
  </click>   
  </clickBehavior> 
  </behaviors>
  </label>
</components>
</page>
</script>
===========程式==========

===========程式==========
<div id="panel2">可以針對滑鼠停駐在此區域上方做出反應</div>
===========程式==========

===========程式==========
程式10
<script type="text/xml-script">
<page xmlns:script="…">
<control targetElement="panel2" cssClass="start">
<behaviors>
<hoverBehavior unhoverDelay="500">
<hover>
<setProperty target="panel2" property="cssClass"
value="hover"/>
</hover>
<unhover>
<setProperty target="panel2" property="cssClass"
value="start"/>
</unhover>
</hoverBehavior>
</behaviors>
</control>
</page>
</script>
===========程式==========

===========程式==========
程式11
<div id="Description">
<div id="DragHandle">點中此處不放可以執行拖放</div>
<div>可以被拖動的內容</div>
整個區域拖動 
</div>
===========程式==========

===========程式==========
程式12
<script type="text/xml-script">
<page xmlns:script="…">
<control targetElement="DragHandle" cssClass=
"draghandle" />
<control targetElement="Description" cssClass=
"floatwindow">
<behaviors>
<floatingBehavior handle="DragHandle">
</floatingBehavior>
</behaviors>
</control>
</page>
</script>
===========程式==========

===========程式==========
程式13
將滑鼠移至<a id=“hoverLink” class=“hoverlabel">
停駐點</a>上方就可以看到Pop-up視窗
<div id="popup" >
    顯示在Pop-up視窗的提示說明
</div>
===========程式==========

===========程式==========
程式14
<script type="text/xml-script">
<page xmlns:script="…">
<control targetElement="popup">
<behaviors>
<popupBehavior id="popupBehavior" parentElement=
"hoverLink" positioningMode="BottomLeft"/>
</behaviors>
</control>
<hyperLink targetElement="hoverLink">
<behaviors>
<hoverBehavior unhoverDelay="1000"
hoverElement="popup">
<hover>
<invokeMethod target="popupBehavior" 
method="show"/>
</hover>
<unhover>
<invokeMethod target="popupBehavior" 
method="hide"/>
</unhover>
</hoverBehavior>
</behaviors>
</hyperLink>
</page>
</script>
===========程式==========

===========程式==========
程式15
<script type="text/xml-script">
<page xmlns:script="…">
<components>
<timer interval="1000" enabled="true" 
tick="countTimerTick" />
<label targetElement="timeLabel" />
</components>
</page>
</script>
===========程式==========

===========程式==========
程式16
<script type="text/javascript" language="JavaScript">
function countTimerTick()
{
var d=new Date();
//取得目前的日期和時間
  var m=d.getMonth().valueOf() + 1;
//取出月份資料
  var time=d.getYear() + "年" + m + "月" + d.getDate()
+ "日 " + d.getHours() + ":" + 
d.getMinutes() + ":" + d.getSeconds();
//將日期和時間轉換成中文格式
  $('timeLabel').control.set_text( time ); 
//將日期時間顯示在網頁上id屬性
//內容值為timeLabel的標籤上
}
</script>
===========程式==========