extjs表单验证
- extjs表单验证
- //放在onReady的function(){}中
- Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
- Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为
- qtip-当鼠标移动到控件上面时显示提示
- title-在浏览器的标题显示,但是测试结果是和qtip一样的
- under-在控件的底下显示错误提示
- side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
- id-[element id]错误提示显示在指定id的HTML元件中
- 1.一个最简单的例子:空验证
- //空验证的两个参数
- 1.allowBlank:false//false则不能为空,默认为true
- 2.blankText:string//当为空时的错误提示信息
- js代码为:
- var form1 = new Ext.form.FormPanel({
- width : 350,
- renderTo : "form1",
- title : "FormPanel",
- defaults : {xtype:"textfield",inputType:"password"},
- items : [{
- id : "blanktest",
- fieldLabel : "不能为空",
- allowBlank : false,//不允许为空
- blankText : "不能为空"//错误提示信息,默认为This field is required!
- }]
- });
- 2.用vtype格式进行简单的验证。
- 在此举邮件验证的例子,重写上面代码的items配置:
- items:[{
- fieldLabel : "不能为空",
- vtype : "email",//email格式验证
- vtypeText : "不是有效的邮箱地址",//错误提示信息,默认值我就不说了
- id : "blanktest",
- anchor : "90%"
- }
- 你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:
- //form验证中vtype的默认支持类型
- 1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
- 2.alphanum //只能输入字母和数字,无法输入其他
- 3.email //email验证,要求的格式是"langsin@gmail.com"
- 4.url //url格式验证,要求的格式是[url]
- 3.高级自定义密码验证
- 前面的验证都是extjs已经提供的,我们也可以自定义验证函数。
- //先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
- Ext.apply(Ext.form.VTypes,{
- password:function(val,field){ //val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
- if(field.confirmTo){ //confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
- var pwd=Ext.get(field.confirmTo); //取得confirmTo的那个id的值
- return (val==pwd.getValue());
- }
- return true;
- }
- });
- //配置items参数
- items:[
- {
- fieldLabel : "密码",
- id : "pass1",
- },{
- fieldLabel : "确认密码",
- id : "pass2",
- vtype : "password",//自定义的验证类型
- vtypeText : "两次密码不一致!",
- confirmTo : "pass1",//要比较的另外一个的组件的id
- }
- ]
- 4.使用正则表达式验证
- new Ext.form.TextField({
- fieldLabel : "姓名",
- name : "author_nam",
- regex : /[/u4e00-/u9fa5]/, //正则表达式在/...../之间. [/u4e00-/u9fa5] : 只能输入中文.
- regexText : "只能输入中文!",
- allowBlank : false //此验证依然有效.不许为空.
- Ext.apply(Ext.form.VTypes,
- {
- daterange: function(val, field)
- {
- var date = field.parseDate(val);
- // We need to force the picker to update values to recaluate the disabled dates display
- var dispUpd = function(picker)
- {
- var ad = picker.activeDate;
- picker.activeDate = null;
- picker.update(ad);
- };
- if (field.startDateField)
- {
- var sd = Ext.getCmp(field.startDateField);
- sd.maxValue = date;
- if (sd.menu && sd.menu.picker)
- {
- sd.menu.picker.maxDate = date;
- dispUpd(sd.menu.picker);
- }
- }
- else if (field.endDateField)
- {
- var ed = Ext.getCmp(field.endDateField);
- ed.minValue = date;
- if (ed.menu && ed.menu.picker)
- {
- ed.menu.picker.minDate = date;
- dispUpd(ed.menu.picker);
- }
- }
- return true;
- },
- password: function(val, field)
- {
- if (field.initialPassField)
- {
- var pwd = Ext.getCmp(field.initialPassField);
- return (val == pwd.getValue());
- }
- return true;
- },
- passwordText: '两次输入的密码不一致!',
- chinese:function(val,field)
- {
- var reg = /^[/u4e00-/u9fa5]+$/i;
- if(!reg.test(val))
- {
- return false;
- }
- return true;
- },
- chineseText:'请输入中文',
- age:function(val,field)
- {
- try
- {
- if(parseInt(val) >= 18 && parseInt(val) <= 100)
- return true;
- return false;
- }
- catch(err)
- {
- return false;
- }
- },
- ageText:'年龄输入有误',
- alphanum:function(val,field)
- {
- try
- {
- if(!//W/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',
- url:function(val,field)
- {
- try
- {
- if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- urlText:'请输入有效的URL地址.',
- max:function(val,field)
- {
- try
- {
- if(parseFloat(val) <= parseFloat(field.max))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- maxText:'超过最大值',
- min:function(val,field)
- {
- try
- {
- if(parseFloat(val) >= parseFloat(field.min))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- minText:'小于最小值',
- datecn:function(val,field)
- {
- try
- {
- var regex = /^(/d{4})-(/d{2})-(/d{2})$/;
- if(!regex.test(val)) return false;
- var d = new Date(val.replace(regex, '$1/$2/$3'));
- return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
- }
- catch(e)
- {
- return false;
- }
- },
- datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
- integer:function(val,field)
- {
- try
- {
- if(/^[-+]?[/d]+$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- integerText:'请输入正确的整数',
- minlength:function(val,field)
- {
- try
- {
- if(val.length >= parseInt(field.minlen))
- return true;
- return false
- }
- catch(e)
- {
- return false;
- }
- },
- minlengthText:'长度过小',
- maxlength:function(val,field)
- {
- try
- {
- if(val.length <= parseInt(field.maxlen))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- maxlengthText:'长度过大',
- ip:function(val,field)
- {
- try
- {
- if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- ipText:'请输入正确的IP地址',
- phone:function(val,field)
- {
- try
- {
- if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- phoneText:'请输入正确的电话号码,如:0920-29392929',
- mobilephone:function(val,field)
- {
- try
- {
- if(/(^0?[1][35][0-9]{9}$)/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- mobilephoneText:'请输入正确的手机号码',
- alpha:function(val,field)
- {
- try
- {
- if( /^[a-zA-Z]+$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- alphaText:'请输入英文字母'
- });
另外一种方式扩展一些VType,基本上是用正在表达式的,方便做验证了。
:
- Ext.form.VTypes["hostnameVal1"] = /^[a-zA-Z][-.a-zA-Z0-9]{0,254}$/;
- Ext.form.VTypes["hostnameVal2"] = /^[a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}([.][a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}){0,}$/;
- Ext.form.VTypes["ipVal"] = /^([1-9][0-9]{0,1}|1[013-9][0-9]|12[0-689]|2[01][0-9]|22[0-3])([.]([1-9]{0,1}[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2}[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-4])$/;
- Ext.form.VTypes["netmaskVal"] = /^(128|192|224|24[08]|25[245].0.0.0)|(255.(0|128|192|224|24[08]|25[245]).0.0)|(255.255.(0|128|192|224|24[08]|25[245]).0)|(255.255.255.(0|128|192|224|24[08]|252))$/;
- Ext.form.VTypes["portVal"] = /^(0|[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
- Ext.form.VTypes["multicastVal"] = /^((22[5-9]|23[0-9])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){3})|(224[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2})|(224[.]0[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])))$/;
- Ext.form.VTypes["usernameVal"] = /^[a-zA-Z][-_.a-zA-Z0-9]{0,30}$/;
- Ext.form.VTypes["passwordVal1"] = /^.{6,31}$/;
- Ext.form.VTypes["passwordVal2"] = /[^a-zA-Z].*[^a-zA-Z]/;
- Ext.form.VTypes["hostname"]=function(v){
- if(!Ext.form.VTypes["hostnameVal1"].test(v)){
- Ext.form.VTypes["hostnameText"]="Must begin with a letter and not exceed 255 characters"
- return false;
- }
- Ext.form.VTypes["hostnameText"]="L[.L][.L][.L][...] where L begins with a letter, ends with a letter or number, and does not exceed 63 characters";
- return Ext.form.VTypes["hostnameVal2"].test(v);
- }
- Ext.form.VTypes["hostnameText"]="Invalid Hostname"
- Ext.form.VTypes["hostnameMask"]=/[-.a-zA-Z0-9]/;
- Ext.form.VTypes["ip"]=function(v){
- return Ext.form.VTypes["ipVal"].test(v);
- }
- Ext.form.VTypes["ipText"]="1.0.0.1 - 223.255.255.254 excluding 127.x.x.x"
- Ext.form.VTypes["ipMask"]=/[.0-9]/;
- Ext.form.VTypes["netmask"]=function(v){
- return Ext.form.VTypes["netmaskVal"].test(v);
- }
- Ext.form.VTypes["netmaskText"]="128.0.0.0 - 255.255.255.252"
- Ext.form.VTypes["netmaskMask"]=/[.0-9]/;
- Ext.form.VTypes["port"]=function(v){
- return Ext.form.VTypes["portVal"].test(v);
- }
- Ext.form.VTypes["portText"]="0 - 65535"
- Ext.form.VTypes["portMask"]=/[0-9]/;
- Ext.form.VTypes["multicast"]=function(v){
- return Ext.form.VTypes["multicastVal"].test(v);
- }
- Ext.form.VTypes["multicastText"]="224.0.1.0 - 239.255.255.255"
- Ext.form.VTypes["multicastMask"]=/[.0-9]/;
- Ext.form.VTypes["username"]=function(v){
- return Ext.form.VTypes["usernameVal"].test(v);
- }
- Ext.form.VTypes["usernameText"]="Username must begin with a letter and cannot exceed 255 characters"
- Ext.form.VTypes["usernameMask"]=/[-_.a-zA-Z0-9]/;
- Ext.form.VTypes["password"]=function(v){
- if(!Ext.form.VTypes["passwordVal1"].test(v)){
- Ext.form.VTypes["passwordText"]="Password length must be 6 to 31 characters long";
- return false;
- }
- Ext.form.VTypes["passwordText"]="Password must include atleast 2 numbers or symbols";
- return Ext.form.VTypes["passwordVal2"].test(v);
- }
- Ext.form.VTypes["passwordText"]="Invalid Password"
- Ext.form.VTypes["passwordMask"]=/./;
另外写一下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:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割