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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Vuex 入门教程
Jan 10 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
js实现for循环跳过undefined值示例
Jul 02 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php字符串操作常见问题小结
2016/10/11 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python模拟随机游走图形效果示例
2018/02/06 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
Shell编程面试题
2012/05/30 面试题
社区活动策划方案
2014/08/21 职场文书
刑事起诉书范文
2015/05/19 职场文书
复兴之路展览观后感
2015/06/02 职场文书
退货证明模板
2015/06/23 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫