EXTjs校验

自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证。

对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证,而字段多的验证可以通过字定义VType类型进行验证支持。

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

Extjsform组件

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/ObjectactionName,[Objectoptions]):执行一个预订的动作,可用选项包括:

url:动作提交的路径

method:表单的提交方式,有效值包括GET、POST

params:传递到请求中的参数

headers:

success:执行成功后回调的函数,包括两个参数:form和action

failure:执行失败后回调的函数,包括两个参数:form和action

clientValidation:是否客户端验证

clearInvalid():清除表单中所有的无效验证信息

findField(Stringid):查找表单字段

getValues([BooleanasString]):

isDirty():表单数据是否被更改过

isValid():客户端验证是否成功

load(Objectoptions):执行表单读取动作

loadRecord(Recordrecord):从一个数据记录中读取数据到表单中

markInvalid(Array/Objecterrors):成批设置表单字段为验证无效

reset():重置表单

setValues(Array/Objectvalues):成批设置表单字段值

submit(Objectoptions):执行表单提交动作

updateRecord(Recordrecord):持久化表单数据到记录集中

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(Objectoptions)

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(Mixedvalue)

getValue()

setValue(Mixedvalue)

isDirty():字段值在装载后是否被修改过

isValid(BooleanpreventMark):当前字段值是否合法

markInvalid([Stringmsg])

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:校验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/Stringchecked):

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(Stringquery,BooleanforceAll):

getValue():

getStore():

setValue(Stringvalue):

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:iA”。一般使用“H:i:s”

H:带前缀0的24小时

i:带前缀0的分钟

s:带前缀0的秒

invalidText:当时间值非法时显示的提示信息

altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割

时间: 2024-10-14 18:25:02

EXTjs校验的相关文章

Extjs校验配置项

Extjsform组件1.Ext.form.Action 配置项:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和actionmethod:表单的提交方式,有效值包括GET.POSTparams:传递到请求中的参数url:动作提交的路径waitMsg:动作执行时显示的等待信息属性:Action.CLIENT_INVALID:客户端验证错误Action.CONNECT_FAILURE:通信错误Action.LO

Extjs表单输入框异步校验的插件实现

一.效果如图所示 特点: 1.异步后台校验不会对用户操作产生阻塞感: 2.可在用户停止输入后自动校验,避免频繁进行无谓的后台校验: 3.以插件方式实现,方便使用: 二.插件源码如下: /** * Created by jiawenjun on 2016/10/19. */ Ext.define('Ux.plugins.FieldAjaxVerify',{ extend: 'Ext.AbstractPlugin', alias: 'plugin.fieldajaxverify', buffer:5

extjs/js时间校验

//时间秒判断var re=/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$///时间毫秒秒判断var res=/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):

ExtJS 4 表单

Form Panel表单面板就是普通面板Panel增加了表单处理能力.表单面板可以用在任何需要收集用户提交数据的地方.表单面板可以使用Container Layout提供的最简单的拜访表单控件的方式.表单面板可以和Model绑定,以方便加载和保存数据.其实表单面板包裹了Basic Form组件,Basic Form负责处理所有表单控件的管理,校验,提交和加载数据.这意味着所有Basic Form能接收的配置选项,都可以直接在表单面板上使用. Basic Form Panel 开始我们演示一个可以

ExtJs xtype类型介绍

自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下: Ext.define('MyApp.PressMeButton', { extend: 'Ext.button.Button', xtype: 'pressmebutton',//指定自定义组件的xtype text: 'Press Me' }); 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ex

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式定义 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

用异提交时,后台通过校验规则文件,校验不通过时,跳转到INPUT视图时,前台显示错误信息的解决办法

1.第一种: 最近项目使用了struts2的校验(其实我觉得后台校验,特别是struts的校验,完全可以放在其他地方处理,比如交给js或者业务逻辑),而且系统刚好还使用了extjs,此时问题出现了:假如提交数据后,struts校验没有通过,那么struts会自动返回input,而extjs提交数据方式都是ajax,根本就不理会struts 的返回值,然后系统就会报错,页面也不可能显示校验失败的相关信息, 针对此种情况,一种处理方式是在struts.xml中增加input结果集,重定向到另一个ac

Extjs 6 MVC开发模式(二)

1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护:这就是Extjs MVC开发模式的初衷. 在官方给出的MVC例子中,我们可以看到一个简单的列表编辑功能,这篇文章就围绕这个功能进行

Nodejs+Extjs+Mongodb开发第三天 登录页面(1)

学习新技术最快捷的方式就是做项目.在第一天的环境搭建好后,我就准备基于Nodejs+Extjs+Mongodb来做一个Web系统. 环境搭建:http://blog.csdn.net/jrainbow/article/details/38845639 一.技术选择的原因 1.Nodejs.这个不用说了,就是为了学习这个来的.因为要做的是Web系统,所以选择了Express框架. 2.Extjs.原因也很简单,因为笔者的美工不行,而且之前有使用过Extjs框架.为了更满足自己的银弹心理,这个项目选