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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
js实现网页定位导航功能
Mar 07 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
详解Python字符串对象的实现
2015/12/24 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
使用Python的turtle模块画国旗
2019/09/24 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
国庆节标语大全
2014/10/08 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers