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 相关文章推荐
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
字节飞书面试promise.all实现示例
Jun 16 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JS编程小常识很有用
2012/11/26 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
自我评价的范文
2014/02/02 职场文书
协议书范本
2014/04/23 职场文书
员工保密协议书
2014/09/27 职场文书
买房协议书范本
2014/10/23 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年度安全工作总结
2014/12/04 职场文书
高二化学教学反思
2016/02/22 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL