对ExtJS基础稍微有所了解的人都知道,表单验证肯定需要到FormPanel了,那么FormPanel首先他是继承自Ext.Panel的,其他的如TreePanel,GridPanel,TabPanel等也是继承自Ext.Panel的,今天要说的是表单验证,为什么要用ExtJs的表单验证呢,自己手写JS代码也可以完成啊,因为Ext早就帮我们做好了,我只是拿过来用就可以了,写JS得多少行代码啊
闲话少说,在验证之前,我不得不提两个小知识点:
第一点:
//大家在很多的extjs代码中都看到了这两个,他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)
//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示
//大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady的function(){}中)
第二点:
//空验证的两个参数
1.allowBlank:false//false则不能为空,默认为true
2.blankText:string//当为空时的错误提示信息
具体代码如下
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
defaults:{width:150,xtype:"textfield"}, //先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
//配置items参数
items:[
{
xtype:"textfield",
allowBlank:false,
fieldLabel:"邮箱",
vtype:"email",//email格式验证
blankText:"不能为空,请填写",
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%"
},
{ fieldLabel:"密码",
inputType:"password",
id:"pass1",
allowBlank:false,
blankText:'请输入密码',
anchor:"90%"
},
{
fieldLabel:"确认密码",
inputType:"password",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"pass1",//要比较的另外一个的组件的id
anchor:"90%"
}
],
buttons:[{text:'提交'},{text:'取消'}]
});
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;
}
});
分享到:
相关推荐
Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
一个简单的小例子,用ExtJS实现了华丽的注册页面,用Servlet实现向数据库添加注册信息,也就是注册。
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习
我偏不描述20个字是的发生的发生的发生大幅
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
参考以前资源,用extJS4.2.1版本做的一个demo示例,希望对大家有用。
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
通过多级的代码来获取组件当中表单元素值的一些技巧
表单验证+对话框+日期格式化+日期选择框+select美化js框架
Jquery、YUI、ExtJs 三大js主流框架,实现表单输入框的提示,错误验证的强大demo;
本工程为java Web 工程,旨在演示如何提交Extjs 中的表单。 本工程编码方式:UTF-8; 欢迎下载。
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
用extjs实现登陆页面的前台验证。
Extjs界面设计器,可以根据可视化的设计界面,通过拖动组件和修改属性的方法,生成Extjs脚本,对于Extjs开发有很大的帮助,
通过这个观看视频会让你很快的了解到extjs,并且能够很快的进入ext的使用
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...