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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php实现json编码的方法
2015/07/30 PHP
PHP多进程编程实例详解
2017/07/19 PHP
JS 判断代码全收集
2009/04/28 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
python开发之list操作实例分析
2016/02/22 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python argparse模块应用实例解析
2019/11/15 Python
python中如何写类
2020/06/29 Python
pip install命令安装扩展库整理
2021/03/02 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
SQL Server面试题
2016/10/17 面试题
店长岗位的工作内容
2013/11/12 职场文书
初三化学教学反思
2014/01/23 职场文书
思想品德课教学反思
2014/02/10 职场文书
元旦晚会主持词
2014/03/24 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
小学体育组工作总结
2015/08/13 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书