Extjs表单常见验证小结


Posted in Javascript onMarch 07, 2014
//放在onReady的function(){}中 
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。 
Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为:

qtip-当鼠标移动到控件上面时显示提示;
title-在浏览器的标题显示,但是测试结果是和qtip一样的;
under-在控件的底下显示错误提示;
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值;
id-[element id]错误提示显示在指定id的HTML元件中

1.一个最简单的例子:空验证

//空验证的两个参数 
allowBlank:false//false则不能为空,默认为true 
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验证,要求的格式是""
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 //此验证依然有效.不许为空.
Javascript 相关文章推荐
js中parseInt函数浅谈
Jul 31 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
vue-test-utils初使用详解
May 23 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
extJS中常用的4种Ajax异步提交方式
Mar 07 #Javascript
禁用JavaScript控制台调试的方法
Mar 07 #Javascript
jquery日历控件实现方法分享
Mar 07 #Javascript
jquery.form.js用法之清空form的方法
Mar 07 #Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
jquery 实现两级导航菜单附效果图
Mar 07 #Javascript
document.addEventListener使用介绍
Mar 07 #Javascript
You might like
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP 事件机制(2)
2011/03/23 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
JS中style属性
2006/10/11 Javascript
JavaScript的目的分析
2007/01/05 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Python实现学生成绩管理系统
2020/04/05 Python
遗传算法python版
2018/03/19 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Servlet的生命周期
2013/08/25 面试题
网络研修随笔感言
2014/02/17 职场文书
感恩节活动策划方案
2014/05/16 职场文书
积极向上的团队口号
2014/06/06 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers