首先说明一下表单验证与其相关的一些设置
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //指示错误出现的方式,包含的值为
qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip,使用此种方式必须声明Ext.QuickTips.init(); 进行初始化
title-在浏览器的标题显示
under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中
表单项的显示错误出现的方式也可以修改各项的msgTarget属性,如
{
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验证函数(也可以取其他的名字)
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
}];
下面是自定义了年龄验证
//扩展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
{
xtype : "numberfield",
fieldLabel : "高",
value : 150,
width : 48,
validator : function(value) {
if(value =='1'){
return '提示信息';
}
}
return true;
},
name : "height"
}
以下是自定义输入内容字节的验证
{
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
new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
regexText:"只能输入中文!", //正则表达式错误提示
allowBlank : false //此验证依然有效.不许为空.
分享到:
相关推荐
Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
Extjs表单VTYPE扩展,方便验证!
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
ExtJS对几种面向对象体现.txt ExtJS对几种面向对象体现.txt
一个简单的小例子,用ExtJS实现了华丽的注册页面,用Servlet实现向数据库添加注册信息,也就是注册。
extjs 表单提交 需 要 注 意 的 事 项
我偏不描述20个字是的发生的发生的发生大幅
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
EXTJS3.0扩展例子集合...内含源代码...
extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习
ExtJs表单设计器是一个纯web在线设计器。通过左边的控件树进行拖拉节点到设计区进行设计和布局。设计区是通过html进行展示,尽可能的达到所见即所得的效果。预览区是通过设计区的html进行解析拼装ext的json配置,...
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
ExtJs2.0学习系列(1)--Ext.MessageBox
extjs多选 下拉框扩展
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
参考以前资源,用extJS4.2.1版本做的一个demo示例,希望对大家有用。
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.