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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
canvas 中如何实现物体的框选
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
php分割合并两个字符串的函数实例
2015/06/19 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python实现中文转换url编码的方法
2016/06/14 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
django foreignkey(外键)的实现
2019/07/29 Python
python实现图片插入文字
2019/11/26 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
法律专业个人实习自我鉴定
2013/09/23 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
大学生见习总结报告
2015/06/24 职场文书
初二物理教学反思
2016/02/19 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js