Atlas学习手记(26):使用Validators验证用户输入

ValidatorAtlas提供的一组验证用户输入的客户端组件,用来检查InputControl类型的Atlas控件,例如Web.UI.TextBox的输入数据。在ASP.NET中提供了一组服务器端的验证控件,Atlas中的Validator在客户端也提供了同样的功能。

 

主要内容

1Validators概述

2.完整示例

 

一.Validators概述

ValidatorAtlas提供的一组验证用户输入的客户端组件,用来检查InputControl类型的Atlas控件,例如Web.UI.TextBox的输入数据。在ASP.NET中提供了一组服务器端的验证控件,Atlas中的Validator在客户端也提供了同样的功能。Atlas提供的Validator如下所示:

1requiredFieldValidator:检查是否有数据输入。

2typeValidator:检查输入的数据是否为特定的类型。

3rangeValidator:检查输入的值是否在一个范围之内。

4customValidator:用自定义的验证函数验证输入。

5regexValidator:用指定的正则表达式验证输入。

某个Atlas客户端控件的Validator可被定义成一个集合,当控件的propertyChanged事件被引发时,Atlas将调用Validator集合中的所有Validator去验证输入的数据。在验证的过程中一旦失败,这个ValidatorvalidationMessage将被设置。Validator可以以组的形式验证一组控件的输入,并统一显示错误信息。您还可以指定一个validationErrorLabel控件关联于某个将被验证的输入控件,它可以显示验证过程中的错误并可以自定义错误提示。[来自于Dflying的介绍]

二.完整示例

下面针对这几种Validator做几个简单的小例子。

1requiredFieldValidator

检测是否有有数据输入,用一个textbox接收用户输入,用一个label来显示错误信息:

<div>

    
<h3>Example 1: Required Field Validator</h3>

    
<br />

    
<input type="text" id="value1TextBox" class="input" />

    
&nbsp; <span id="validator1" style="color: red">You must enter some text</span> 

    
<br />

    
<br />

    Text: 
<span id="value1Label" class="result"></span>

    
<br />

</div>

编写Atlas脚本,分别用一个requiredFieldValidatorvalidtionErrorLabel,并且把用户输入的数据显示在一个label上,在validationErrorLabel中用associatedControl来关联要验证的控件:

<script type="text/xml-script">

    
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

        
<components>

         
<textBox id="value1TextBox">

                
<validators>

                    
<requiredFieldValidator  errorMessage="You must enter some text."/>

                
</validators>

         
</textBox>

         
<validationErrorLabel id="validator1" associatedControl="value1TextBox" />

         
<label id="value1Label">

            
<bindings>

                
<binding dataContext="value1TextBox" dataPath="text" property="text" />

            
</bindings>

         
</label>

        
</components>

    
</page>

</script>

运行后界面如下:

输入数据,验证通过,没有提示错误信息:

输入为空,提示错误信息“You must enter some text”:

2typeValidator

检测用户输入的数据类型,在这个例子中我们验证用户输入的是否为数据:

<div>

<h3>Example 2: Type Validator</h3>

    
<br />

    
<input type="text" id="value2TextBox" class="input" />

    
<br />

    
<br />

    
<span id="validator2" style="color:red">You must enter a valid number</span>

</div>

编写Atlas脚本,设置非常简单,指定typeNumber

<script type="text/xml-script">

    
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

        
<components>

        
<textBox id="value2TextBox">

                        
<validators>

                            
<requiredFieldValidator errorMessage="You must enter a number." />

                            
<typeValidator type="Number" errorMessage="You must enter a valid number" />

                        
</validators>

                    
</textBox>

                    
<validationErrorLabel id="validator2" visibilityMode="Hide" associatedControl="value2TextBox" />

        
</components>

    
</page>

</script>

编译运行,输入数字100,验证通过没有报错误信息:

输入TerryLee,提示“You must enter a valid number”错误信息:

3.regexValidator

用正则表达式来验证用户输入的数据,这里我们以验证用户录入的电话号码格式是否正确为例,添加相关的HTML元素:

<div>
    
<h3>Example 3: RegEx Validator</h3>

    
<input type="text" id="value3TextBox" class="input" />

    
<br />

    
<br />

    
<span id="validator3" style="color: red">You must a valid phone number</span>

</div>

编写Atlas脚本,加入regexValidator,注意这儿在正则表达式的前后必须加入“/”?否则会报脚本错误:

<script type="text/xml-script">

    
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

        
<components>

        
<textBox id="value3TextBox">

            
<validators>

                
<requiredFieldValidator errorMessage="You must enter some text." />

                
<regexValidator regex="/(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}/" errorMessage="You must a valid phone number" />

            
</validators>

        
</textBox>

            
<validationErrorLabel id="validator3" visibilityMode="Collapse"

            associatedControl
="value3TextBox" />

        
</components>

    
</page>

</script>

编译运行,录入正确的电话号码:

输入错误格式的电话号码,会报“You must a valid phone number”错误:

本文就简单的介绍到这儿,其他的示例大家可以参考Atlas官方网站。

完整示例下载:http://files.cnblogs.com/Terrylee/ValidatorDemo.rar

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2006-09-17 12:08 TerryLee 阅读(3269) 评论(18)  编辑 收藏 网摘 所属分类: [08]  Web开发

  回复  引用  查看    
#1楼 2006-09-17 11:42 | Dflying Chen      
good!
  回复  引用  查看    
#2楼 [楼主]2006-09-17 12:01 | TerryLee      
@Dflying Chen
谢谢:-)
  回复  引用  查看    
#3楼 2006-09-17 13:29 | 木野狐      
"You must a valid phone number"

语句不通顺
  回复  引用  查看    
#4楼 [楼主]2006-09-17 13:50 | TerryLee      
@木野狐
提示信息太长了,截图不好截,后半句被我删了:-)
实际开发中一般都用中文提示信息
  回复  引用  查看    
#5楼 2006-09-17 14:23 | Dflying Chen      
@TerryLee
换成“invalid phone number”好了:)
  回复  引用    
#6楼 2006-09-17 17:32 | micro[匿名] [未注册用户]
无聊的回复!!!!!
  回复  引用    
#7楼 2006-09-17 17:32 | micro[匿名] [未注册用户]
比较无聊的回复!!!!!
  回复  引用    
#8楼 2006-09-17 17:33 | micro[匿名] [未注册用户]
大家不要骂我!
  回复  引用    
#9楼 2006-09-20 13:54 | totalhuang [未注册用户]
http://atlas.asp.net/atlastoolkit/FilteredTextBox/FilteredTextBox.aspx
里试了一下,发现用Ctrl + V 可以在字符文本框里输入数字==..
  回复  引用  查看    
#10楼 [楼主]2006-09-20 16:52 | TerryLee      
@totalhuang
AtlasControlToolkit还有很多不稳定的地方,也正在逐步完善

昨天刚发布了最新的版本
  回复  引用    
#11楼 2006-10-06 19:29 | minghui227 [未注册用户]
@totalhuang
挺大的一个漏洞
  回复  引用  查看    
#12楼 [楼主]2006-10-06 19:58 | TerryLee      
@minghui227
Atlas还只是一个开发代号,有漏洞也是正常的,呵呵

PS:中秋快乐!
  回复  引用    
#13楼 2006-10-06 20:42 | minghui227 [未注册用户]
@TerryLee
中秋也快乐!!
在第二个数字的测试中发现输入数字和字母混合他不会报错。看来还是正则相对可靠点哦
  回复  引用  查看    
#14楼 [楼主]2006-10-06 20:47 | TerryLee      
@minghui227
是的,希望正式版本中可以修改这些漏洞
  回复  引用    
#15楼 2006-10-06 20:50 | minghui227 [未注册用户]
@TerryLee
是不是AtlasControlToolkit出最新版了?给个连接地址好么。。
还有 Atlas基础教程——ASP.NET Ajax快速开发 这本书发行了没?
我想买本看看撒。
谢谢。中秋快乐!!!
  回复  引用  查看    
#16楼 [楼主]2006-10-06 21:16 | TerryLee      
  回复  引用  查看    
#17楼 2006-12-04 10:47 | 金哈      
既然错误信息显示在<span >You must enter some text</span> 中。
为什么还要errorMessage="You must enter some text."?
  回复  引用    
#18楼 2007-01-17 00:33 | snyod [未注册用户]
代表党(.NET平台)感谢您.
全部收藏............




标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

相关文章:

相关链接: