AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]

2017-11-16 1230
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


正文
一、资料
1.1.　　表单提示的方式设置，如：
 

Ext.form.Field.prototype.msgTarget = ' side '

　　　　　　该设置为枚举值：'qtip','side','title','under'
qtip：把鼠标移动到控件就可以显示提示信息了，有点像设置了title的input标签一样的效果。
side：该方式用的比较多，控件右边会出现红底白色小圆感叹号图标。
title：和qtip一样，但是没有边框效果，就和普通设置了title的input标签一样。
under：会在控件的正下方挤出一行来显示一个黄底黑色方形感叹号和错误信息文字。
这里不设置就是默认的qtip效果 ，注意这里ext的版本是3.0正式版。
注意单独的控件也有此属性设置msgTarget。
1.2.　　验证方式
1.2.1　　内置
1.2.1.1　　默认
maxLength、minLength、allowBlank(非空)、regex(正则表达式)
1.2.1.2　　自定义
validator，具体用法可以看代码部分，接受一个函数为参数。
1.2.2　　vtype
1.2.2.1　　默认
alpha　　　　 只能输入数字
alphanum　　 只能输入字母和数字
email　　　　  emali验证
url　　　　　　url验证
1.2.2.2　　自定义
大家可以参考 ExtJS中表单验证使用自定义vtype示例

二、代码
这里借用博客园注册界面来实现同样的验证功能（可能验证效果不一样）。
2.1　　截图


2.2　　validatoradd.aspx
 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " validatoradd.aspx.cs "  Inherits = " validatoradd "   %>

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

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
< script  type ="text/javascript" >
    Ext.onReady( function () {
    
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget  =   ' side ' ;
        

         var  form1  =   new  Ext.FormPanel({
            layout:  ' form ' ,
            collapsible:  true ,
            autoHeight:  true ,
            frame:  true ,
            renderTo: Ext.getBody(),
            title:  ' <center style="curor:hand" onclick="window.location.reload();">模拟博客园注册</center> ' ,
            style:  ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' ,
             // 设置标签对齐方式
            labelAlign:  ' right ' ,
             // 设置标签宽
            labelWidth:  170 ,
             // 设置按钮的对齐方式
            buttonAlign: ' center ' ,
            
             // [重要]默认元素属性设置
            defaults:{
                    width: 180
                    ,allowBlank: false                 // 不允许为空
                    ,blankText: ' 该项不能为空! '    // 显示为空的错误信息
                },
            items: [
                 // 不能为空，字符数  >2 && <30
                 new  TextField( ' txt_userName ' , ' 登录用户名 ' , null , null ,[
                    [ ' min ' , 2 , ' 用户名过短，至少需要2个字符 ' ],
                    [ ' max ' , 30 ]
                ])
                 // 不能为空，字符数  >4 && <50
                , new  TextField( ' txt_pwd ' , ' 密　　　码 ' , null ,
                    [[ ' inputtype ' , ' password ' ],
                    [ ' id ' , ' txt_pwd1 ' ]],
                    [[ ' min ' , 4 , ' 密码至少需要4位字符 ' ],
                    [ ' max ' , 50 ]]
                ),
                 // 不能为空，字符数  >4 && <50
                 new  TextField( ' txt_confirm_pwd ' , ' 确 认 密 码 ' , null ,
                    [[ ' inputtype ' , ' password ' ]],
                    [[ ' min ' , 4 , ' 至少需要4位字符 ' ],
                    [ ' max ' , 50 ],
                    [ ' val ' , function (){
                         // $这里注意了$，如果是返回true，表示验证成功了
                         // 返回字符串，表示验证失败，且错误信息为这个字符串
                         if ( this .getRawValue() != null ){
                             var  txt_pwd  =  Ext.get( ' txt_pwd1 ' );
                             if (txt_pwd.getValue()  !=   this .getRawValue())
                                 return   " 请再输入一遍密码，要求与上面的一致 " ;
                        }
                         return   true ;
                    }]]
                ),
                 // 不能为空，字符数  >2 && <30
                 new  TextField( ' txt_display_name ' , ' 显 示 名 称 ' , null , null ,[
                    [ ' min ' , 2 , ' 用户名过短，至少需要2个字符 ' ],
                    [ ' max ' , 30 ]
                ]),
                 // 不能为空 :
                 new  TextField( ' txt_email ' , ' 邮　　　箱 ' , null , null ,[[ ' vt ' , ' email ' ]]),
                 new  RadioGroup( ' rbl_Gender ' , ' 性　　　别 ' ,[[ ' 男 ' , ' 1 ' , true ],[ ' 女 ' , ' 0 ' ]])
            ],
            buttons: [{
                text:  " 保 存 "
                ,handler: function (){
                     // 验证所有表单元素
                     if (form1.form.isValid()){
                        MsgInfo( " 开始表单提交！ " );
                    }
                }
            }, {
                text:  " 取 消 "
                ,handler: function (){
                     // 重置表单项
                    form1.form.reset();
                }
            }]
        });
    });
     </ script >
     </ form >
</ body >
</ html >

　　　　　　代码说明：
a).　　注意defaults属性，这个是非常有用的，常用于设置大部分(items里面的控件的属性)都有的属性，控件也可以通过自行设置来覆盖这个默认设置。
b).　　经过一轮封装后代码仍然稍长，难免有为了封装而封装，这个时候大家可以自行斟酌是否使用封装控件还是直接使用Ext的表单控件。
c).　　特别需要注意在提交的时候需要加上if(form1.form.isValid())，来进行全局验证，因为前面的控件如果你不去触发他(获得光标一次)他是不会去验证的！其他注意项可以参照文章稍后部分的注意。


2.3　　easy-ext.js　　修改部分，主要是对TextField进行扩充
 

// #region Ext.form.TextField
function  TextField(fName,fLabel,defaultValue,others,validators)
{
     // / <summary>
     // / Ext.form.TextField封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="defaultValue">默认值</param>
     // / <param name="others">其他常用设置，格式如：[["width":100]]</param>
     // / <param name="validators">验证设置，格式如：[["maxLength":50],["maxLengthText":'太长']]</param>
     // / <returns>Ext.form.TextField</returns>
     var  text  =   new  Ext.form.TextField();
    
     if (fName != null )
        text.name  =  fName;
    
     if (fLabel != null )
        text.fieldLabel  =  fLabel;
    
     // 设置默认值
     if (defaultValue  !=   null )
        text.setValue(defaultValue);
        
     // 设置其他常用设置
     if (others != null )
    {
         for ( var  i  =   0  ;i < others.length; i ++ )
        {
             if (others[i].length  ==   2 )
            {
                 var  okey  =  others[i][ 0 ];
                 var  oValue  =  others[i][ 1 ];
                 switch (okey.toLowerCase())
                {
                     case   " width " : // Number
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " number " )
                            text.setWidth(oValue);
                         break ;
                     case   " height " : // Number
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " number " )
                            text.setHeight(oValue);
                         break ;
                     case   " it " :
                     case   " inputtype " : // radio, text, password, file (defaults to 'text')
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " string " )
                            text.inputType  =  String(oValue);
                         break ;
                     case   " disabled " : // Boolean
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " boolean " )
                            text.disabled  =  Boolean(oValue);
                         break ;
                     case   " ro " :
                     case   " readonly " : // Boolean
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " boolean " )
                            text.readOnly  =  Boolean(oValue);
                         break ;
                     case   " et " :
                     case   " emptytext " : // String
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " string " )
                            text.emptyText  =  String(oValue);
                         break ;
                     case   " id " :
                         if ( typeof (okey)  ==   " string "   &&   typeof (oValue)  ==   " string " )
                            text.id  =  oValue;
                         break ;
                }
            }
        }
    }
    
     // 设置验证条件
     if (validators != null )
    {
         for ( var  i  =   0  ;i < validators.length; i ++ )
        {
             if (validators[i].length  ==   3 )
            {
                 var  vkey  =  validators[i][ 0 ];
                 var  vValue  =  validators[i][ 1 ];
                 var  vText  =  validators[i][ 2 ];
                privateTextFieldValidatorSwitch(text,vkey,vValue);
                privateTextFieldValidatorSwitch(text,vkey + " em " ,vText);
            }
             else   if (validators[i].length  ==   2 )
            {
                 var  vkey  =  validators[i][ 0 ];
                 var  vValue  =  validators[i][ 1 ];
                privateTextFieldValidatorSwitch(text,vkey,vValue);
            }
        }
    }
    
     return  text;
}
 // 辅助TextField验证用函数
function  privateTextFieldValidatorSwitch(text,vkey,vValue)
{
     if (vkey != null )
    {
         switch (vkey.toLowerCase())
        {
             /* em:Error Message */
             /* - 最大字符数验证 -  */
             case   " max " :
             case   " maxlength " : // Number
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " number " )
                    text.maxLength  =  Number(vValue);
                 break ;
             case   " maxem " :
             case   " maxlengthtext " : // String
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.maxLengthText  =  String(vValue);
                 break ;
             /* - 最小字符数验证 -  */
             case   " min " :
             case   " minlength " : // Number
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " number " )
                    text.minLength  =  Number(vValue);
                 break ;
             case   " minem " :
             case   " minlengthtext " : // String
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.minLengthText  =  String(vValue);
                 break ;
             /* - 正则表达式验证 -  */
             case   " rx " :
             case   " regex " :
                    text.regex  =  vValue;
                 break ;
             case   " rxem " :
             case   " regexText " : // String
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.regexText  =  String(vValue);
                 break ;
             /* - 非空验证 -  */
             case   " ab " :
             case   " allowblank " :
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " boolean " )
                    text.allowBlank  =  Boolean(vValue);
                 break ;
             case   " abem " :
             case   " blanktext " :
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.blankText  =  String(vValue);
                 break ;
             /* - 函数验证 -  */
             case   " val " :
             case   " validator " : // Function
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " function " )
                    text.validator  =  vValue;
                 break ;
             /* - 验证事件 默认是keyup -  */
             case   " ve " :
             case   " validationevent " :
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.validationEvent  =  String(vValue);
                 break ;
             case   " vt " :
             case   " vtype " :
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " string " )
                    text.vtype  =  String(vValue);
                 break ;
        }
    }
}

 // #endregion

　　　　代码说明：
这里再次强调一下，根据实际情况进行封装，满足大部分需求即可！这里扩充了其他常用参数的设置和数据验证的扩充，再这基础之上大家可以很方便的加入其它扩充条件。

三、注意
下面都是写例子或以前发觉的问题，收集如下：
1.　　关于正则表达式验证，如果regex属性设置为带双(单)引号的字符串，将出现js错误！
错误写法：‘/^\d$/’   
正确写法：/^\d$/
2.　　关于设置id后用Ext.getCmp取不到的问题，改成用Ext.get就可以取到了，取值用getValue。这里很是奇怪，直接设置id: xx1可以用getCmp去得到，通过设置属性后就取不到了！！？

四、下载
ExtJS2009-9-20(3)


结束语
写这系列的时候打算把表单就写一篇文章里面的，结果发觉太大，就拆成了两篇，然后拆成三篇，现在只能拆成四篇了，要讲的东西太多，想尽量详细一点，老实说也是边写边查资料收集，难免有误，大家谅解！



本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586544，如需转载请自行联系原作者

文章标签：
JavaScript
C#
前端开发
数据安全/隐私保护
科技小先锋
目录
相关文章
1658538813089932
|
存储 消息中间件 NoSQL
redis入门到精通系列（一）：入门redis看这一篇就够了
如果你是计算机专业学生 ，那么一定使用过关系型数据库mysql。在请求量小的情况下，使用mysql不会有任何问题，但是一旦同时有成千上万个请求同时来访问系统时，就会出现卡顿甚至系统崩溃的情况。最典型的例子就是早期的12306购票网站，一旦到了购票高峰期，12306肯定崩溃。造成这个原因的罪魁祸首就是关系型数据库。
1658538813089932
7568 0
redis入门到精通系列（一）：入门redis看这一篇就够了
郑小健
|
运维 供应链 前端开发
开发一个 ERP
【9月更文第5天】开发一个 ERP (Enterprise Resource Planning) 系统是一项复杂的工程，涉及到多个业务流程的集成与优化。ERP 系统旨在帮助企业整合财务、人力资源、采购、销售、库存管理和生产计划等多个部门的数据，从而提高运营效率和决策质量。本文将带你一起体验从零开始开发一个简单的 ERP 系统，并通过示例代码来说明关键组件的设计与实现。
郑小健
814 3
郑小健
|
机器学习/深度学习 编解码 API
《黑神话：悟空》中的光线追踪与DLSS技术解析
【8月更文第26天】《黑神话：悟空》是一款备受期待的国产动作冒险游戏，它采用了先进的图形技术，包括实时光线追踪和NVIDIA DLSS（Deep Learning Super Sampling），以提供令人震撼的视觉效果和流畅的游戏体验。本文将深入探讨这两种技术在游戏中的应用及其背后的原理。
郑小健
453 1
Java开发者
|
Java
hashCode()和 equals()方法的默认实现
在Java中，`hashCode()` 和 `equals()` 方法的默认实现由 `Object` 类提供。`equals()` 默认比较对象引用是否相同，`hashCode()` 则返回对象的内存地址的整数表示。为了确保哈希表等数据结构的正确性，当重写 `equals()` 时，通常也需要重写 `hashCode()`。
Java开发者
326 9
修己xj
|
Java Spring
Spring Boot 3系列之-启动类详解
Spring Boot启动类是构建Spring Boot应用程序的关键组成部分。它允许开发人员配置和管理应用程序的行为，同时简化了应用程序的配置和部署过程。通过深入了解Spring Boot启动类的功能和用法，开发人员可以更好地构建和管理复杂的Spring Boot应用程序。希望本文能够帮助您更好地理解和使用Spring Boot启动类。
修己xj
713 4
Spring Boot 3系列之-启动类详解
mikechen的互联网架构
|
设计模式 缓存 前端开发
什么是幂等性？四种接口幂等性方案详解！
本文深入分布式系统中的幂等性问题及其解决方案，涵盖数据库唯一主键、乐观锁、PRG模式和防重Token等方法，关注【mikechen的互联网架构】，10年+BAT架构经验倾囊相授。
mikechen的互联网架构
1566 1
什么是幂等性？四种接口幂等性方案详解！
最好zzz
|
存储 关系型数据库 MySQL
RR隔离mysql如何实现？什么情况RR不能解决幻读？
【10月更文挑战第9天】在数据库事务中，隔离级别是一个重要的概念，它定义了事务在并发环境下如何相互隔离。MySQL支持四种隔离级别：READ UNCOMMITTED、READ COMMITTED、REPEATABLE READ和SERIALIZABLE。其中，REPEATABLE READ（简称RR）是MySQL的默认隔离级别，它旨在解决脏读、不可重复读和幻读问题。
最好zzz
422 2
1100237741946300
|
SQL 监控 关系型数据库
使用SQL语句查询操作耗时的技巧与方法
在数据库管理和优化过程中，了解SQL查询操作的耗时是至关重要的
1100237741946300
1716 0
MySQL技术
|
运维 容灾 关系型数据库
介绍几种 MySQL 官方高可用方案
MySQL 官方提供了多种高可用部署方案，从最基础的主从复制到组复制再到 InnoDB Cluster 等等。本篇文章以 MySQL 8.0 版本为准，介绍下不同高可用方案架构原理及使用场景。
MySQL技术
3018 3
介绍几种 MySQL 官方高可用方案
Withcomb
|
SQL 存储 关系型数据库
mysql事务失效
mysql事务失效
Withcomb
692 0

热门文章

最新文章

  • 1
    java实现图片与base64转换
  • 2
    OpenSearch大模型实践之Havenask篇
  • 3
    Pycharm2022最新版安装破解与激活教程，亲测可用
  • 4
    阿里云内网可用的dns
  • 5
    Linux的root账号忘记密码怎么办？看这一篇就够了！
  • 6
    使用阿里云容器服务Jenkins 2.0实现持续集成之the tag you want篇(updated on 2017.09.06)
  • 7
    Skia深入分析8——Skia的GPU绘图
  • 8
    1918年就诞生了比Zoom酷太多的视频聊天设想！而那时才刚有无线电
  • 9
    Windows Phone 7 网络编程之留言板应用
  • 10
    Linux驱动 读写文件【转】
  • 1
    构建AI智能体：三十八、告别“冷启动”：看大模型如何解决推荐系统的世纪难题
    55
  • 2
    HTML文档的基本结构：构建网页的基石
    63
  • 3
    BipedalWalker实战：SAC算法如何让机器人学会稳定行走
    158
  • 4
    快速恢复ie浏览器的正常使用
    57
  • 5
    云原生日志监控体系怎么做才不崩？一篇给你讲透采集、存储、分析、告警的最佳实践
    44
  • 6
    Prometheus 撑不住了？上 Thanos、Cortex、M3！一篇给你讲明白大规模监控的江湖
    48
  • 7
    ETL vs ELT：到底谁更牛？别被名字骗了，这俩是两种世界观
    45
  • 8
    告别繁琐判断：用PHP 8的匹配表达式优雅你的代码
    35
  • 9
    告别繁琐include！PHP自动加载优化全攻略
    145
  • 10
    告别混乱：用PHP 8的Match表达式优雅地简化你的条件逻辑
    24

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格