• ExtJs 自定义Vtype验证


    最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证。自定义的验证主要有两种方式:一种是单字段的自定义验证, 另一种是多字段间的验证。对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证,而字段多的验证可以通过字定义VType类型进行验证 支持。

     


    另外一种方式扩展一些VType,基本上是用正在表达式的,方便做验证了。


    另外写一下Extjs form 组件

    1、Ext.form.Action

         配置项:
              success:执行成功后回调的函数,包括两个参数:form和action
              failure:执行失败后回调的函数,包括两个参数:form和action
              method:表单的提交方式,有效值包括GET、POST
              
    params:传递到请求中的参数
              url:动作提交的路径
              waitMsg:动作执行时显示的等待信息
         属性:
              Action.CLIENT_INVALID:客户端验证错误
              Action.CONNECT_FAILURE:通信错误
              Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回
              Action.SERVER_INVALID:服务端验证错误
              failureType:错误类型
              result:包含布尔类型的success属性和其他属性,如{success: 
    true, msg: 'ok'}
              type:动作类型,可选值有submit和load
                   Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性
                   Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性

    2、Ext.form.BasicForm

         配置项:
              baseParams:传递到请求中的参数
              method:表单的提交方式,有效值包括GET、POST
              url:表单默认的提交路径
              fileUpload:表单是否进行文件上传
              timeout:表单动作的超时时间,默认为30秒
              trackResetOnLoad:是否在表单初次创建时清楚数据
        方法:
              doAction( String
    /Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:
                  url:动作提交的路径
                  method:表单的提交方式,有效值包括GET、POST
                  
    params:传递到请求中的参数
                  headers:
                  success:执行成功后回调的函数,包括两个参数:form和action
                  failure:执行失败后回调的函数,包括两个参数:form和action
                  clientValidation:是否客户端验证
              clearInvalid():清除表单中所有的无效验证信息
              findField( String id ):查找表单字段
              getValues( [Boolean asString] ):
              isDirty():表单数据是否被更改过
              isValid():客户端验证是否成功
              load( Object options ):执行表单读取动作
              loadRecord( Record record ):从一个数据记录中读取数据到表单中
              markInvalid( Array
    /Object errors ):成批设置表单字段为验证无效
              reset():重置表单
              setValues( Array
    /Object values ):成批设置表单字段值
              submit( Object options ):执行表单提交动作
              updateRecord( Record record ):持久化表单数据到记录集中

    3、Ext.form.FormPanel

         配置项:
              items:一个元素或元素数组
              buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中
              buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center
              labelWidth:表单标签的宽度
              labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left
              labelSeparator:字段标签与字段之间的分隔符,默认为
    ':'
              minButtonWidth:按钮的最小宽度,默认为75
         方法:
              getForm() : Ext.form.BasicForm
              load( Object options )
              startMonitoring()
              stopMonitoring()

    4、Ext.form.Field

        配置项:
              name:字段名
              value:字段的初始化值
              disabled:字段是否不可用,默认为false
              fieldLabel:字段标签说明
              hideLabel:隐藏字段标签,默认为false
              labelSeparator:字段标签与字段之间的分隔符,默认为
    ':'
              labelStyle:字段标签样式
              inputType:默认为text
              invalidClass:默认为x
    -form-invalid
              invalidText:字段非法文本提示
              msgTarget:错误信息显示的位置,默认为qtip
                  qtip:显示一个浮动的提示信息
                  title:显示一个浏览器的浮动提示信息
                  under:在字段下方显示一个提示信息
                  side:在字段右边显示一个提示信息
              readOnly:字段是否只读,默认为false
              validateOnBlur:字段在失去焦点时被验证,默认为true
         方法:
              clearInvalid():
              getRawValue()
              setRawValue( Mixed value )
              getValue()
              setValue( Mixed value )
              isDirty():字段值在装载后是否被修改过
              isValid( Boolean preventMark ):当前字段值是否合法
              markInvalid( [String msg] )
              validate()
              reset()

    5、Ext.form.Hidden

    6、Ext.form.Label

         配置项:

              html:

              text:

    7、Ext.form.TextField

         配置项:
              allowBlank:是否允许为空,默认为true
              blankText:空验证失败后显示的提示信息
              emptyText:在一个空字段中默认显示的信息
              grow:字段是否自动伸展和收缩,默认为false
              growMin:收缩的最小宽度
              growMax:伸展的最大宽度
              inputType:字段类型:默认为text
              maskRe:用于过滤不匹配字符输入的正则表达式
              maxLength:字段允许输入的最大长度
              maxLengthText:最大长度验证失败后显示的提示信息
              minLength:字段允许输入的最小长度
              minLengthText:最小长度验证失败后显示的提示信息
              regex:正则表达式
              regexText:正则表达式验证失败后显示的提示信息
              vtype:验证类型的名字
                   alpha:限制只能输入字母
                   alphanum:限制只能输入字母和数字
                   email
                   url
              vtypeText:验证失败时的提示信息
              validator:自定义验证函数
              selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false

    8、Ext.form.TextArea
          配置项:
               preventScrollbars:是否禁止出现滚动条,默认为false

    9、Ext.form.NumberField
          配置项:
               allowDecimals:是否允许输入小数,默认为true
               allowNegative:是否允许输入负数,默认为true
               baseChars:输入的有效数字集合,默认为
    '0123456789'
               decimalPrecision:数字的精度,默认保留小数点后2位
               decimalSeparator:十进制分隔符,默认为
    '.'
               maxValue:允许输入的最大数值
               maxText:超过最大值之后的提示信息
               minValue:允许输入的最小数值
               minText:超过最小值之后的提示信息
               nanText:输入非有效数值之后的提示信息

    10、Ext.form.Checkbox
          配置项:
               boxLabel:复选框的文字描述
               
    checked:复选框是否被选择,默认为false
               handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、
    checked
               inputValue:
         方法:
               getValue():返回复选框的checked状态
               setValue( Boolean
    /String checked ):

    11、Ext.form.CheckboxGroup
         配置项:
               allowBlank:是否允许不选择,默认为true
               blankText:
               columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
               items:对象数组
               vertical:是否垂直方向显示对象,默认为false

    12、Ext.form.Radio
         方法:
               getGroupValue():
               setValue( value {String
    /Boolean} ):

    13、Ext.form.RadioGroup
         配置项:
               allowBlank:
               blankText:

    14、Ext.form.ComboBox
          配置项:
               displayField:被显示在下拉框中的字段名
               editable:是否可编辑,默认为true
               forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。
               hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值
               listWidth:下拉列表的宽度
               minListWidth:下拉列表的最小宽度,默认为70像素
               loadingText:当下拉框加载数据时显示的提示信息,只有当mode
    ='remote'时才会生效
               maxHeight:下拉列表框的最大高度,默认为300像素
               minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode
    ='remote'默认为4,mode='local'默认为0
               mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据
               pageSize:下拉列表框的分页大小。该项设置只在mode
    ='remote'时生效
               queryParam:查询的名字,默认为
    'query',将被传递到查询字符串中
               allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串
    ''
               selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable
    =true时才会生效
               store:列表框绑定的数据源
               transform:将页面中已存在的元素转换为组合框
               lazyInit:延时初始化下拉列表,默认为true
               lazyRender:延时渲染,默认为false
               triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询
               typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false
               value:初始化组合框中的值
               valueField:组合框的值字段
               valueNotFoundText:值不存在时的提示信息
               tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式

         方法:
               clearValue():清空字段当前值
               doQuery( String query, Boolean forceAll ):
               getValue():
               getStore():
               setValue( String value ):

    15、Ext.form.DateField
         配置项:
               maxValue:允许选择的最大日期
               maxText:当日期大于最大值时的错误提示信息
               minValue:允许选择的最小时间
               minText:当日期小于最小值时的错误提示信息
               format:日期显示格式,默认为“m
    /d/y”,一般使用“Y-m-d”
                   Y:四位年份
                   m:带前缀0的月份
                   d:带前缀0的日期
                   y:两位年份
                   n:不带前缀0的月份
                   j:不带前缀0的日期
                   w:星期的数字,0表示星期日,1代表星期一
               showToday:是否显示今天按钮,默认为true
               altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“
    |”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
               disabledDates:禁止选择的日期组成的数组
               disabledDatesText:选择禁选日期时显示的提示信息
               disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一
               disabledDaysText:选择禁选星期时显示的提示信息
               invalidText:当日期值非法时显示的提示信息
         方法:
               getValue():取得日期值

    16、Ext.form.FieldSet
          配置项:
               animCollapse:动画折叠,默认为false
               checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false
               checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
               labelWidth:字段标签的宽度,可以级联到子容器
               layout:布局,默认为form

    17、Ext.form.TimeField
          配置项:
               maxValue:列表中允许的最大时间
               maxText:当时间大于最大值时的错误提示信息
               minValue:列表中允许的最小时间
               minText:当时间小于最小值时的错误提示信息
               increment:两个相邻选项间的时间间隔,默认为15分钟
               format:显示格式,默认为“g:i A”。一般使用“H:i:s”
                    H:带前缀0的24小时
                    i:带前缀0的分钟
                    s:带前缀0的秒
               invalidText:当时间值非法时显示的提示信息
               altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“
    |”进行分割

  • 相关阅读:
    构造函数产生的点及原因
    关于未捕获异常的处理(WPF)
    消息协定
    为outlook增加“邮件召回”功能
    MHA故障切换和在线手工切换原理
    Delphi 类型转换函数(有几个函数没见过,FloatToStrF,FloatToText等等)
    Delphi 常用属性说明(超长)
    Delphi程序自删除的几种方法
    CreateFile,ReadFile等API详解(或者说MSDN的翻译)
    去除文件属性(使用SetFileAttributes API函数)
  • 原文地址:https://www.cnblogs.com/sunjie9606/p/2128808.html
Copyright © 2020-2023  润新知