`
zhouxuebao87
  • 浏览: 117555 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

验证代码

    博客分类：
  • flex
 
阅读更多

FLEX常用验证控件

文章分类:Web前端

1.验证必填项 
代码如下:

 

Flex代码 复制代码
  1. <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/>   
  2. <mx:FormItem label="用户名：">   
  3. <mx:TextInput id="nameTI"/>   
  4. </mx:FormItem>   
  5. <mx:Button id="btn" label="提交" />  
 


    Validator组件的功能是检测必填项。我们把要检测的组件的名字写在source属性中，把要检测的组件的属性写在property属性中，然后自定义 requiredFieldError属性的值即可。当然requiredFieldError属性的值也可以不定义，那么就会使用默认的提示文字。

    上面的错误提示的文字有些看不清，只需要加上这样一句就OK了：

 

Flex代码 复制代码
  1. <mx:Style>   
  2.  .errorTip   
  3.  {   
  4.      fontSize: 12;   
  5.  }   
  6. </mx:Style>  
 


2.控制检测时机 
    默认的情况下，Flex当我们切换组件焦点的时候检测
    任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。
    在验证组件中指明触发器和触发动作的语法如下所示。

 

Flex代码 复制代码
  1. <mx:验证组件类型   
  2.     source="{输入源id}"  
  3.     property="输入源的属性"  
  4.     trigger="{触发器}"  
  5.     triggerEvent="触发事件">   

 


    下面这个例子为按Tab键切换焦点已经不能触发检测动作了，只有单击“提交”按钮才会触发检测。

 

Flex代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150">   
  3.      <mx:Validator id="nameV " source="{nameTI}" property="text"     
  4.          requiredFieldError="必须输入姓名！"  
  5.          trigger="{btn}" triggerEvent="click" />   
  6.      <mx:Validator id="ageV" source="{ageTI}" property="text"  
  7.          requiredFieldError="必须输入年龄！"  
  8.          trigger="{btn}" triggerEvent="click"/>   
  9.      <mx:FormItem label="姓名：">   
  10.          <mx:TextInput id="nameTI"/>   
  11.      </mx:FormItem>   
  12.      <mx:FormItem label="年龄：">   
  13.          <mx:TextInput id="ageTI"/>   
  14.      </mx:FormItem>   
  15.      <mx:Button id="btn" label="提交" />   
  16. </mx:Application>  
 


    在默认情况下，Validator 会在Flex发出valueCommit事件的时候进行检测，因此当焦点改变的时候，会自动进行检测。而上面的源码中，则手动指定了进行检测的事件是btn按钮的click事件。

任意动作的触发也可采用代码触发验证方式。
    其语法如下所示。
        <组件事件="验证组件.validate();"/>
    验证组件都包含一个validate方法，用以代码执行验证。
比如：
    <mx:Button id="btn" label="提交" click="nameV.validate();" />

3.验证失败处理 
    验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。
    用户可根据需要修改相应的出错信息。其语法如下所示。
               <验证组件错误类型属性="自定义错误提示"/>

例：

 

Flex代码 复制代码
  1. //引用ValidationResult Event类   
  2. import mx.events.ValidationResultEvent;       
  3. private function checkHandle():void     //验证处理函数   
  4. {   
  5.    if(emailV.validate().type==ValidationResultEvent.VALID)                     
  6.    {   
  7.        Alert.show("电子邮件验证成功"); //提示"验证成功"  
  8.    }   
  9. }   
  10.   
  11. <!--按钮组件，用于验证处理-->   
  12. <mx:Button id="mySubmit" label="验证" click="checkHandle();"/>     
 


注：
    If(验证组件id.validate().type==ValidationResultEvent.VALID)
    ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。

Validator还有一个listen属性 ，它用来指定检测的错误信息显示在哪个组件上。例：

 

Flex代码 复制代码
  1.     <?xml version="1.0" encoding="utf-8"?>   
  2.     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">   
  3.      <mx:Validator id="nameV" source="{nameTI}" property="text"  
  4.          requiredFieldError="必须输入姓名！"  
  5.          trigger="{btn}" triggerEvent="click"/>   
  6.      <mx:Validator id="ageV" source="{ageTI}" property="text"  
  7.          requiredFieldError="必须输入年龄！"  
  8.          trigger="{btn}" triggerEvent="click"/>   
  9.      <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"  
  10.          requiredFieldError="必须选择性别！"  
  11.          trigger="{btn}" triggerEvent="click"  
  12.          listener="{maleRB}" />   
  13.      <mx:FormItem label="姓名：" width="150">   
  14.          <mx:TextInput id="nameTI"/>   
  15.      </mx:FormItem>   
  16.      <mx:FormItem label="年龄：" width="150">   
  17.          <mx:TextInput id="ageTI"/>   
  18.      </mx:FormItem>   
  19.      <mx:FormItem label="性别：" direction="horizontal" width="150">   
  20.          <mx:RadioButtonGroup id="sexRBG"/>   
  21.              <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>   
  22.              <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>   
  23.      </mx:FormItem>   
  24.      <mx:Button id="btn" label="提交" />   
  25. </mx:Application>  

 

 

对于性别的选择，由于检测两个RadioButton比较麻烦，采用了检测RadioButtonGroup的 selectedValue属性的方法，如果这个属性为空，就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件，检测的错误信息无法显示出来，所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。

4.批量验证 
创建一个表单

Flex代码 复制代码
  1. <mx:Form>   
  2.      <mx:FormItem label="当前部门: ">   
  3.          <mx:Text id="txtDepartName"  width="100"/>   
  4.      </mx:FormItem>   
  5.        
  6.      <mx:FormItem label="*新建角色名称(至多10个汉字): ">   
  7.          <mx:TextInput id="roleName" width="100%"/>   
  8.      </mx:FormItem>   
  9.        
  10.      <mx:FormItem label="*新建角色名称(至多10个英文字母): ">   
  11.          <mx:TextInput id="roleEnName" width="100%"/>   
  12.      </mx:FormItem>   
  13.        
  14.      <mx:FormItem label="角色描述(至多50个汉字): ">   
  15.          <mx:TextInput id="roleDescibe" width="100%"/>   
  16.      </mx:FormItem>   
  17.        
  18.      <mx:ControlBar>   
  19.          <mx:Button id="btnSubmit" label="提交" click="btnSubmit_click()" />   
  20.          <mx:Button id="btnClose" label="关闭" click="btnClose_click()" />   
  21.      </mx:ControlBar>   
  22.   
  23.      //创建验证控件，放在数组里   
  24.      <fx:Array id="roleNameValidators">    
  25.          <mx:Validator id="roleNameValidator"  
  26.                        source="{roleName}" property="text"  
  27.                        required="true" requiredFieldError="请输入角色名" />   
  28.      </fx:Array>   
  29.   
  30.      //通过数组，创建组合验证   
  31.      <fx:Array id="roleEnNameValidators">   
  32.          <mx:StringValidator source="{roleEnName}" property="text"  
  33.                              tooShortError="字符串太短了，请输入最少1个字符. "  
  34.                              tooLongError="字符串太长了，请输入最长10个字符. "  
  35.                              minLength="1" maxLength="10"/>     
  36.          <mx:RegExpValidator id="roleEnNameValidator"  
  37.                              source="{roleEnName}" property="text"  
  38.                              flags="g,i" expression="^[a-z]+$"  
  39.                              noMatchError="请输入正确的英文字母"  
  40.                              required="false"/>   
  41.      </fx:Array>   
  42.  </fx:Declarations>   
  43.   
  44.  //代码   
  45.  private function btnSubmit_click():void{   
  46.              //分别检测验证是否通过，如果没有通过，则通过派发事件，主动显示错误提示   
  47.              if(Validator.validateAll(roleEnNameValidators).length != 0)    
  48.                  roleEnName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));   
  49.              else if(Validator.validateAll(roleNameValidators).length != 0)   
  50.                  roleName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));   
  51.              else   
  52.              {   
  53.                  var par:powerModule = this.owner as powerModule;   
  54.                  par.roleList.addItem({label:"大三辅导员",data:"3"});   
  55.                    
  56.                  var model:RoleModel=new RoleModel();   
  57.                  model.roleName="大三辅导员";   
  58.                  model.roleEnName="daisan";   
  59.                  model.roleID=par.personVo.departID+"."+model.roleEnName;   
  60.                    
  61.                  model.ysxh="010200";   
  62.                  model.roleDescribe="测试用的";   
  63.                  AddRoleResult.token=roleService.add(model);      
  64.              }   
  65.                
  66.          }  
 

附录： 
1.邮件验证

 

Flex代码 复制代码
  1. <mx:EmailValidator   
  2.         id="emailV"  
  3.         source="{txtEmail}"  
  4.         property="text"  
  5.         invalidCharError="非法字符"  
  6.         invalidDomainError="非法域"  
  7.         invalidIPDomainError="非法IP域"  
  8.         missingAtSignError="缺少@符"  
  9.         missingPeriodInDomainError="缺少域后缀"  
  10.         missingUsernameError="缺少用户名"/>  
 

2.字符串长度验证

 

Flex代码 复制代码
  1. <mx:StringValidator source="{fname}" property="text"  
  2.         tooShortError="字符串太短了，请输入最少4个字符. "  
  3.         tooLongError="字符串太长了，请输入最长20个字符. "  
  4.         minLength="4" maxLength="20"  
  5.         trigger="{myButton}" triggerEvent="click"  
  6.         valid="Alert.show('字符串格式正确!');"/>     
 

3.日期验证

 

Flex代码 复制代码
  1. <mx:DateValidator source="{txtDate}" property="text"  
  2.         required="true" requiredFieldError="请输入日期"  
  3.         allowedFormatChars="-" inputFormat="YYYY-MM-DD"  
  4.         trigger="{btnSubmit}" triggerEvent="click"  
  5.         valid="mx.controls.Alert.show('验证成功');"  
  6.         invalid="mx.controls.Alert.show('验证失败');"  
  7.         wrongDayError="日输入错误"  
  8.         wrongMonthError="月输入错误"  
  9.         wrongYearError="年输入错误"  
  10.         wrongLengthError="日期长度错误"  
  11.         invalidCharError="日期分隔符错误"  
  12.         formatError="inputFormat 配置错误"/>  
 

4.英文字母验证

 

Flex代码 复制代码
  1. < mx:RegExpValidator  id ="regExpValidator"     
  2.       source ="{txtInput}"  property ="text"     
  3.       flags ="g,i"  expression ="^[a-z]+$"     
  4.       valid ="handleResult(event)"  invalid ="handleResult(event)"  
  5.       trigger ="{btnSubmit}"  triggerEvent ="click"  
  6.       noMatchError ="请输入正确的英文字母"  
  7.       required ="false" />  
 

5.年龄验证

 

Flex代码 复制代码
  1. <mx:NumberValidator id="ageV" source="{ageTI}" property="text"  
  2.     domain="int"  
  3.     minValue="6"  
  4.     maxValue="100"  
  5.     lowerThanMinError="年龄过小！"  
  6.     exceedsMaxError="年龄过大！"  
  7.     integerError="年龄必须是整数！"  
  8.     invalidCharError='输入了非数字字符！'  
  9.     requiredFieldError="必须输入年龄！"  
  10.     trigger="{btn}" triggerEvent="click"/>  
 

6.性别验证

 

Flex代码 复制代码
  1. <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"  
  2.     requiredFieldError="必须选择性别！"  
  3.     trigger="{btn}" triggerEvent="click"  
  4.     listener="{maleRB}"/>   
  5.    <mx:FormItem label="性别：" direction="horizontal" width="200">   
  6.         <mx:RadioButtonGroup id="sexRBG">   
  7.             <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>   
  8.             <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>   
  9.         </mx:RadioButtonGroup>   
  10.    </mx:FormItem>  
 

参考文献： 
1.用Validator组件检测必填项. http://blog.csdn.net/zzr173/archive/2008/09/14/2842409.aspx
2.批量检查validator. http://blog.csdn.net/supsteven/archive/2009/04/11/4062882.aspx
3.一个让validator验证时，立即出现tooltip的小方法. http://blog.csdn.net/supsteven/archive/2009/04/15/4076343.aspx
4.flex的数据验证. http://blog.csdn.net/turkeyzhou/archive/2008/11/29/3397172.aspx

分享到：
| FLEX4布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp验证代码验证代码

    【标题】"jsp验证代码验证代码"涉及到的是在JavaServer Pages (JSP) 中进行数据验证的技术。在Web开发中，验证代码是必不可少的一部分，它主要用于确保用户输入的数据符合预设的规则，防止非法数据进入数据库或执行...

    js验证代码大全

    JS验证代码大全是汇集了多种JavaScript验证技术的资源集合，可以帮助开发者在创建网页表单、验证用户输入等方面提供有效的解决方案。 一、表单验证基础 在网页开发中，表单验证是非常重要的一环，它能够确保用户...

    漂亮的验证代码漂亮的验证代码

    漂亮的验证代码漂亮的验证代码漂亮的验证代码漂亮的验证代码漂亮的验证代码漂亮的验证代码漂亮的验证代码

    易 语 言 验证代码

    易 语 言 验证代码易 语 言 验证代码易 语 言 验证代码易 语 言 验证代码

    js通用表单验证代码

    本文将深入探讨“js通用表单验证代码”这一主题，以及如何利用JavaScript进行有效的表单验证。 首先，我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言，它可以在用户的浏览器上运行，无需...

    js表单验证代码 很全很强大

    总的来说，JavaScript表单验证代码库提供了一套完整的解决方案，帮助开发者轻松实现对用户输入的验证，提升网站或应用的用户体验和数据质量。开发者在实际使用时，需要根据项目需求选择合适的验证规则，配置错误提示...

    js手机注册表单验证代码.zip

    综上所述，"js手机注册表单验证代码.zip" 提供了一个基本的前端验证框架，涵盖了手机注册所需的关键步骤，包括输入验证、验证码发送和接收，以及表单的最终提交。开发者可以根据自己的项目需求对这些代码进行修改和...

    原生js带提示留言表单验证代码.zip

    本资源"原生js带提示留言表单验证代码.zip"提供了一套完整的原生JavaScript实现的表单验证解决方案，尤其适用于留言功能。以下是关于这个代码包中的关键知识点的详细说明： 1. **原生JavaScript**：原生JavaScript...

    C#后台验证代码

    C#后台验证代码,不需要单独写代码，只需要知道正则表达式就可以了。

    JavaScript验证代码大全

    内含JavaScript验证代码以及说明。。。 好东西要大家一起分享，所以不要分了~~

    js表单验证代码，包含各种input标签，还有css代码

    非常强大的js表单验证代码，包含各种input标签，还有css代码

    基于RetinaFace+ArcFace的人脸识别测试和验证代码

    基于RetinaFace+ArcFace的人脸识别测试和验证代码。可参考博客：https://blog.csdn.net/Bixiwen_liu/article/details/115677588?spm=1001.2014.3001.5501

    注册验证代码

    注册验证代码

    jsp实现注册页面验证码验证代码

    Description: 该文章讲述了如何使用 JSP 实现注册页面验证码验证代码，代码使用请有基础 JSP 基础，知道将代码添加到哪里，文章中已做详细阐述。 Tag: JSP、验证码、代码、表单验证 Knowledge Points: 1. JSP ...

    Js 通用验证代码，实用的。

    在Web开发中，验证代码是必不可少的部分，用于确保用户输入的数据符合预期的格式和标准，从而提高数据的准确性和安全性。"Js 通用验证代码"是一个可复用的解决方案，它旨在减少开发者在每个新项目中编写相同验证逻辑...

    注册页面的验证代码

    根据给定文件的信息，我们可以总结出以下关于“注册页面的验证代码”的相关知识点： ### 注册页面验证代码概述 在Web开发中，用户输入的有效性和合法性验证是非常重要的一个环节。有效的验证可以确保用户输入的...

    validator框架客户端验证代码

    本压缩包提供的"validator框架客户端验证代码"正是为了实现这一目的。 `Validator`框架是Java Bean Validation的实现，它是JSR 303/349标准的一部分，后来在JSR 380中进行了更新。该框架主要用于验证Java对象的属性...

    实用的jQuery表单验证代码.rar_实用的jQuery表单验证代码

    通过学习和应用“实用的jQuery表单验证代码”，开发者能够更好地理解和实践上述知识点，构建出具有交互性与用户体验俱佳的表单验证功能。同时，该代码作为一个实例，有助于加深对jQuery及其在表单验证中应用的理解，...

    js验证代码

    js 验证代码

    jQuery带步骤网站注册表单填写验证代码

    在网页开发中，用户注册表单的验证是一个关键环节，它能确保用户输入的数据符合预设规则，提高...通过对"jQuery带步骤网站注册表单填写验证代码"的学习和实践，你可以更好地掌握这一技巧，并将其运用到自己的项目中。

Magicbox
Global site tag (gtag.js) - Google Analytics