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处理VBArray的函数使用说明
May 11 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
vue 中使用print.js导出pdf操作
Nov 13 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
环境工程专业个人求职信
2013/12/05 职场文书
英语教师求职信
2014/06/16 职场文书
新手上路标语
2014/06/20 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
试用期转正后的自我评价
2014/09/21 职场文书