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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
小程序实现上下切换位置
Nov 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP网上调查系统
2006/10/09 PHP
其他功能
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php经典算法集锦
2015/11/14 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
js中的this关键字详解
2013/09/25 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python调用webservice接口的实现
2019/07/12 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
技校教师求职简历的自我评价
2013/10/20 职场文书
《穷人》教学反思
2014/04/08 职场文书
2014年保管员工作总结
2014/11/18 职场文书
平遥古城导游词
2015/02/03 职场文书
党员反四风学习心得体会
2016/01/22 职场文书