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使用办法
Apr 01 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue内置指令详解
Apr 03 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
js实现简易拖拽的示例
Oct 26 Javascript
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
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
javascript date格式化示例
2013/09/25 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
理解javascript对象继承
2016/04/17 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python3多线程操作简单示例
2018/05/22 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
实用求职信范文分享
2013/12/25 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2014年教研员工作总结
2014/12/23 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python