//放在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:[
{fieldLabel:"不能为空",
allowBlank:false, //不允许为空
blankText:"不能为空", //错误提示信息,默认为This field is required!
id:"blanktest",
}
]
});
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格式验证,要求的格式是http://www.baidu.com
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 //此验证依然有效.不许为空.
分享到:
相关推荐
我偏不描述20个字是的发生的发生的发生大幅
Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
一个简单的小例子,用ExtJS实现了华丽的注册页面,用Servlet实现向数据库添加注册信息,也就是注册。
表单验证+对话框+日期格式化+日期选择框+select美化js框架
title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , ...
Extjs表单VTYPE扩展,方便验证!
Jquery、YUI、ExtJs 三大js主流框架,实现表单输入框的提示,错误验证的强大demo;
EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy...
//表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: “请稍候”, waitMsg: ‘正在登陆…’, url: ‘http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin’, method: ...
三、表单组件验证 118 四、小结 120 第十八章:FormPanel布局与初始化 121 一、布局概述 121 二、分割吧! 121 三、表单初始化 126 四、小结 131 第十九章:叹为观止的表格组件——GridPanel 132 一、表格、表格面板...
Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单(及其验证方法),数据组件: store,model等,讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。
4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的表单数据加载 4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 ...
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
课件讲解,EXTJS-表单事例详解
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
一、效果如图所示 特点: 1、异步后台校验不会对用户操作产生阻塞感; 2、可在用户停止输入后自动校验,避免频繁进行无谓的后台校验; 3、以插件方式实现,方便使用; 二、插件源码如下: ...* Created by jiawenjun ...
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的。所以它有着panel的属性 要...