ExtJs表单几种验证与扩展

ExtJs表单几种验证与扩展

首先说明一下表单验证与其相关的一些设置

Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。

Ext.form.Field.prototype.msgTarget='side'; //指示错误出现的方式，包含的值为

qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip，使用此种方式必须声明Ext.QuickTips.init(); 进行初始化

title-在浏览器的标题显示

under-在控件的底下显示错误提示

side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值.

id-[element id]错误提示显示在指定id的HTML元件中

表单项的显示错误出现的方式也可以修改各项的msgTarget属性，如

Js代码



{

xtype : 'textfield',

fieldLabel : '姓名' ,

name : 'name' ,

allowBlank : false ,

msgTarget : 'qtip'

}

下面我们来看一下和表单验证相关的属性及他们验证的顺序

1、是否允许为空

allowBlank : Boolean //false则不能为空，默认为true

blankText : String//当为空时的错误提示信息

2、输入数据长度限制

minLength : Number

minLengthText : String

maxLength : Number

maxLengthText : String

3、使用vtype验证

vtype : String

vtypeText : String

extjs的vtype默认支持的验证有：

alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
alphanum//只能输入字母和数字，无法输入其他
email//email验证，要求的格式是"langsin@gmail.com"
url//url格式验证，要求的格式是http://www.baidu.com

前面的验证都是extjs已经提供的，我们也可以自定义验证函数。

//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）

Js代码



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

}];

下面是自定义了年龄验证

Js代码



//扩展VTypes增加id验证方式,和年龄验证

Ext.apply(Ext.form.VTypes,{

'age' : function(_v){

if(/^\d+$/.test(_v)){//判断必须是数字

var _age = parseInt(_v);

//增加业务逻辑,小于100的数字才符合年龄

if(0 < _age && _age <100){

return true ;

}

}

return false ;

},

ageText : '年龄必须为数字，并且不能超过100岁，格式为23' , //出错信息后的默认提示信息

ageMask:/[0-9]/i //键盘输入时的校验

})

4、使用validator编写自定义函数验证

validator : Function

Js代码



{

xtype : "numberfield",

fieldLabel : "高",

value : 150,

width : 48,

validator : function(value) {

if(value =='1'){

return '提示信息';

}

}

return true;

},

name : "height"

}

以下是自定义输入内容字节的验证

Js代码



{

xtype : "field",

fieldLabel : "姓名",

value : 150,

width : 48,

validator : function(value) {

var length = value.replace(/[^\x00-\xff]/g, "xx").length;

if(length>1000){

return '长度不能超过1000个字节，一个汉字字符为两个字节！';

}

return true;

},

name : "name"

}

5、使用自己编写的正则表达式regex

regex : RegExp

regexText : String

Js代码



new Ext.form.TextField({

fieldLabel : "姓名",

name : "author_nam",

regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.

regexText:"只能输入中文!", //正则表达式错误提示

allowBlank : false //此验证依然有效.不许为空.