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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
ES6对象操作实例详解
May 23 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扩展函数
2006/10/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python回调函数用法实例分析
2015/05/09 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
通过实例解析Python调用json模块
2019/12/11 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
超市5.1促销活动
2014/01/15 职场文书
迟到检讨书大全
2014/01/25 职场文书
发展部经理职责规定
2014/02/22 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
医学生求职自荐书
2014/06/12 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年教研员工作总结
2015/05/26 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
python 标准库原理与用法详解之os.path篇
2021/10/24 Python