用VS2005创建一个Atlas Web应用程序(6)

本文接着上一篇文章继续介绍数据绑定的其他特性和数据验证。
1．数据绑定方向
绑定时可以指定方向，默认情况下绑定方向为In，帮定方向也可以指定为Out或InOut。
代码实例如下：
Javascript脚本：

function pageLoad() {

var tbInput = new Web.UI.TextBox($('textBoxInput'));

var lbValue = new Web.UI.Label($('labelSpan'));

var binding_1 = new Web.Binding();

binding_1.set_dataContext(tbInput);

binding_1.set_dataPath('text');

binding_1.set_property('text');

binding_1.set_transformerArgument("Checkbox is {0}.");

binding_1.set_direction(Web.BindingDirection.InOut);

lbValue.get_bindings().add(binding_1);

lbValue.initialize();

tbInput.initialize();

}

</script>

2．数据绑定转换

当进行绑定时，会触发一个转换事件，在上一篇文章的例子中就演示了两种的内建转换ToString和Invert，例子中把转换函数句柄赋给转换事件，你也可以添加转换参数值，转换参数值会被传入转换事件句柄。下面的代码演示了你自定义的转换实现。

javascript脚本实现：

function pageLoad() {

var binding_1 = new Web.Binding();

binding_1.transform.add(onCustomTransform);//添加自定义转换

}

function onCustomTransform(sender, eventArgs) { .. }

</script>

或脚本声明实现：

<binding dataContext="textBoxString" dataPath="text" property="text" transform="onCustomTransform" /> //指定自定义转换onCustomTransform

</bindings>

2．在触发事件中执行绑定
在上一篇文章的例子中演示了通过ID来执行绑定，例如，在下面的代码中，select控件的selectionChanged事件通过invokeMethod执行相应的绑定。

javascript脚本：

function DoOtherStuff(sender, eventArgs)

{

var value = eventArgs.get_value();

var newValue = value + " Some other text";

eventArgs.set_value(newValue); //执行绑定

}

脚本声明：

<invokeMethod target="setCss" method="evaluateIn" />//执行绑定

</selectionChanged>

</select>>

<binding dataContext="textBoxText" dataPath="text"

property="text" />

<binding id="setCss" dataContext="selectStyle"

dataPath="selectedValue" property="cssClass"

transform="DoAdditionalHandling" />

</bindings>

</label>

</page>

2．有效性验证

有效性验证是检查InputControl类型的客户端控件的用户输入数据正确性的强大方法，比如对于Web.UI.TextBox控件，"Atlas'就提供了数字验证。常用的验证如下：

requiredFieldValidator. 检查是否输入了数据，即不能为空，必须输入值。

typeValidator：类型检查，如数字型

rangeValidator：检查输入值是否在最大值和最小值范围内。

customValidator：定义一个自定义表达式来验证。

regexValidator：用规则表达式来验证数据，规则表达时的定界符为”/”

例如：

<requiredFieldValidator errorMessage="You must enter some text." />//非空验证

<regexValidator regex="/$\d{3}$(\ )\d{3}-\d{4}/"

errorMessage="The format '(nnn) nnn-nnnn'." /> //数据格式验证

</validators>

</textBox>

验证在验证集合中进行定义，当propertyChanged事件发生时，控件的值被验证并且产生一个验证事件，你可以象下面的例子一样去处理验证事件。
有一个特别的控件validationErrorLabel能够通过工具提示和星号显示错误信息。为了能检查一组控件的有效性，验证也可以进行分组。现在我们做一个例子来说明。下面的例子能使你看到如何声明验证规则、如何把控件分组后放到验证组中，当一个属性是无效状态时如何使绑定无效，同时演示了不同种类的验证：非空验证、类型验证（要求数字型）、范围验证（值从最小到最大的范围）、规则验证（输入电话号码）、自定义验证。因为页面中所有的输入元素都被分为一个验证组，所以只有所有的输入都是正确的整个页面才是有效的。如果输入的值不符合要求，右侧将显示*号，当把鼠标放在*号上停留一会，将会显示提示文字。添加一个页面control4.aspx，把下面的代码复制粘贴到control4.aspx代码中。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>ASP.NET "Atlas" 演示: Sys.Control 验证</title>

.valid {width:100%;border:solid 2px black;text-align:center;background-color: Green; color: white;font-family:Verdana;font-size:20pt;}

.invalid {width:100%;border:solid 2px black;text-align:center;background-color: red; color: white;font-family:Verdana;font-size:20pt;}

</style>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1" />

<h2>Atlas.控件演示:验证</h2>

</div>

<p></p>

请输入文本： <input type="text" id="value1TextBox" class="input" />

文本: <span id="value1Label" class="result"></span><br />

<hr />

<h3><u>例 2: 类型和范围验证</u></h3>

要求一个数值型值且在10和20之间. 它完成类型和范围验证. 

<hr />

<h3><u>例 3: 规则表达式验证</u></h3>

要求按指定的格式输入电话号码. 它完成了类型和表达式验证. 

<hr />

<h3><u>例 4: 自定义验证</u></h3>

输入一个职务 (工程师, 经理, 厨师, 演员, 建筑师):  

<hr />

输入一个从1到5:  

</div>

function pageLoad()

{

var tb5 = $('value5TextBox').control;

validator = new Sys.UI.CustomValidator();//创建自定义验证

validator.set_errorMessage("无效的输入，输入值必须在1到5之间！");//设置出错时的提示信息

validator.validateValue.add(onValidateValue5);//加入验证时发生事件的自定义验证事件句柄

tb5.get_validators().add(validator); //把验证加入控件

tb5.validated.add(onvalue5TextBoxValidated);//加入验证后发生事件的验证事件句柄

}

function onValidateValue(sender, eventArgs) //在验证value4TextBox时执行的函数

{

var names = [ '工程师', '经理', '演员', '建筑师', '厨师'];

var valid = names.contains(eventArgs.get_value());

eventArgs.set_isValid(valid);

}

function onvalue5TextBoxValidated(sender, eventArgs)

{

//检查有效性，如果无效弹出提示框

var tb5 = $('value5TextBox').control;

if (tb5.get_isInvalid())

{

Sys.UI.Window.messageBox(tb5.get_validationMessage(), Sys.UI.MessageBoxStyle.OK);

tb5.focus();

}

function onValidateValue5(sender, eventArgs) //在验证value5TextBox的事件中执行，检验其有效性

{

var value = parseInt(eventArgs.get_value());

var valid = (value < 1 || value > 5) ? false : true;

// Set the validity on the validator

eventArgs.set_isValid(valid);

}

function onValidGroup(sender, eventArgs)

{

}

</script>

<validators> //添加非空验证

</validators>

</textBox>

<validationErrorLabel id="validator1" associatedControl="value1TextBox" /> //在value1TextBox验证无效时，用于显示*号

<bindings> //数据绑定，数据源为value1TextBox元素

</bindings>

</label>

<requiredFieldValidator errorMessage="你必须输入一个数字！" /> //非空验证

<typeValidator type="Number" errorMessage="你必须输入一个正确的数字型数字！" />//数据类型验证，要求数字型

<rangeValidator lowerBound="10" upperBound="20" errorMessage="你必须输入一个范围在10到20之间的一个数！" /> //范围验证

</validators>

</textBox>

<validationErrorLabel id="validator2" visibilityMode="Hide" associatedControl="value2TextBox" /> //在验证value2TextBox无效时，用于显示*号

</validators>

</textBox>

<requiredFieldValidator errorMessage="你必须输入文本！" />//添加非空验证和错误提示信息

<customValidator validateValue='onValidateValue' errorMessage="你必须输入一个职务！" /> //添加自定义验证句柄onValidateValue和错误提示信息

</validators>

</textBox>

<validationGroup id="formGroup"> //把页面上所有需要验证的输入项划分为一个验证组formGroup

</associatedControls>

</validationGroup>

<bindings> //数据绑定，validLabel的可见性取值来源于验证组formGroup的有效型isValid，当无效时validLabel不可见，有效时validLabel可见

</bindings>

</label>

<bindings> //数据绑定，invalidLabel的可见性取值来源于验证组formGroup的有效型isValid的相反值，当无效时invalidLabel可见，有效时invalidLabel不可见

</bindings>

</label>

<validationErrorLabel id="validator5" visibilityMode="Collapse"

associatedControl="value5TextBox" />

</components>

</page>

</script>

</div>

</form>

</body>

</html>

现在可以运行control4.aspx测试一下。页面上共有5个验证例子，试试每个例子，如果验证无效出现*号，把鼠标放在*号上，看看有什么提示，在例5中如果输入了非法的数值会弹出一个脚本提示框。整个页面如果有一个输入框的输入不正确，页面最上面会显示“无效”，直到整个页面的所有输入框的输入验证都通过了，页面最上面才会显示“有效”，因为在上面例子的代码中，把这个页的输入元素分为了一个验证组formGroup，并且把显示信息的元素validLabel和invalidLabel都和验证组formGroup进行了数据绑定，才会有这样的效果。
演示源码下载

posted on 2006-09-28 15:58 大白鲨阅读(196) 评论(0) 收藏举报

刷新页面返回顶部

大白鲨博客

导航

公告

用VS2005创建一个Atlas Web应用程序(6)