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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue导出html、word和pdf的实现代码
Jul 31 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 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一个开放式辐射探测器
2020/03/12 无线电
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python Flask基础教程示例代码
2018/02/07 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
销售经理工作职责
2014/02/03 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
党校毕业心得体会
2014/09/13 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Java中API的使用方法详情
2022/04/06 Java/Android