ext表单验证
ext用法简介
EXT 2.0学习和使用总结
• EXT是由JAVASCRIPT脚本编写成的一个强大 的B/S架构下的良好的用户体验的客户端程 序。对于饱受网页样式疾苦的广大程序员 同志们来讲,EXT让我们看到了黎明的曙光, 我们看到了JAVA也可以做的如此的——炫
• 在这里先给大家发几个截图看看,体会一 下
后台管理布局
tbfill
Ext.Toolbar.Fill 文件
tbitem
Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
把EXT部署到TOMCAT上
将ext-2.0.2放到tomcat的webapps目录下, 然后启动,部署成功,端口设置成8080,方 便后面案例演示,最好把这个目录放在 TOMCAT下面,里面有拓展控件,下载的没 有。 原因:EXT中文件引用基本上都是相对的,放 在TOMCAT中可以很好的解析
使用前提-导入程序库
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window
Ext.Window 窗口
工具栏组件
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
scripts/ext/resources/css/ext-all.css//EXT通用CSS,包含所有的样式(必须) scripts/ext/resources/css/icon.css//自定义存放菜单项或其他页面图标(自
EXTJS-表单-1
HtmlEditor
• • • • • • • • • • • • var field = new Ext.form.HtmlEditor({ fieldLabel: '在线编辑器', enableAlignments: true, enableColors: true, enableFont: true, enableFontSize: true, enableFormat: true, enableLinks: true, enableLists: true, enableSourceEdit: true, fontFamilies: ['宋体', '黑体'] });
• • • •
allowBlank:输入是否允许为空 maxLength: 最大长度 minLength: 最小长度 vtype: 是Ext提供的一套默认的校验方案,一共 Ext 有四种方案:
Html原始的提交方式
• buttons: [{ • text: '按钮', • handler: function() { • form.getForm().getEl().dom.action = “result.jsp"; • form.getForm().getEl().dom.submit(); • } • }]
TextArea
• var field = new Ext.form.TextArea({ • width: 200, • grow: true, • preventScrollbars: true, • fieldLabel: 'empty', • allowBlank: false, • emptyText: '空', • maxLength: 50, • minLength: 10, • value: '第一行\n第二行\n第三行\n第四行' • });
ExtJS—表单与输入控件
ExtJS—表单与输入控件表单在EXT中非常受欢迎,初看这些输入控件,好像只是修改了CSS样式而已,但是如果用Firebug查看一下DOM,似乎确实只有CSS发生了变化,隐藏在漂亮界面下的依然是原来的input控件,如果你想使用EXT提供的一些绚丽的功能,建议尝试EXT的表单(Form)和对应的输入控件。
本文就是简单介绍表单与输入控件的使用方法。
一、创建一个简单的表单1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示:view plaincopy to clipboardprint?1.<mce:script type="text/javascript"><!--2.Ext.onReady(function(){3.var form=new Ext.form.FormPanel({4.defaultType:'textfield',belAlign:'right',6.title:'form',belWidth:50,8.frame:true,9.width:220,10.items:[{11.fieldLabel:' 文本框'12.}],13.buttons:[{14.text:'按钮'15.}]16.});17.form.render("div1");18.});19.20.// --></mce:script>3、注意HTML中无需定义太多东西,只需要定义个div id='div1'就可以实现,初始配置显然变得更紧凑,利用items和buttons指定包含的控件和按钮。
具体实现效果如图1所示。
图1 简单的表单二、FormPanel和BasicForm详解如上面的实例所示,我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.For mPanel 的最大好处就是利于布局,Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分,同时也可以利用items指定Ext.form.FormPanel内部的子组件。
form表单的验证
form表单的验证<!-- 表单验证插件 --><script src="${ctx}/static/plugins/validate/jquery.validate.min.js"></script><form id="variable_form" class="form-horizontal" method="post"><div class="form-group" ><label class="col-sm-2 control-label">届数<span class="text-danger">*</span></label><div class="col-sm-2"><input type="text" class="form-control" name="number" ></div></div></form>$(function () {$('#variable_form').validate({ //去form的iderrorElement: 'div',errorClass: 'help-block',focusInvalid: false,ignore: "",rules: {number: { //取对象为name的值required: true,number:true},time:{required: true,email:false},},messages: {number: {required: "届数不能为空",number: "届数只能输⼊数字"},time:{required: "换届时间不能为空"},},highlight: function (e) {$(e).closest('.form-group').removeClass('has-info').addClass('has-error');},success: function (e) {$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');$(e).remove();},errorPlacement: function (error, element) {if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {var controls = element.closest('div[class*="col-"]');if(controls.find(':checkbox,:radio').length > 1) controls.append(error);else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));}else if(element.is('.select2')) {error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));}else if(element.is('.chosen-select')) {error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));}else error.insertAfter(element.parent());},submitHandler: function (form) {form.submit();},invalidHandler: function (form) {}});});function saveorggeneral(){if($('#variable_form').valid()){ //取formid验证通过后。
ext_form表单提交
})
}
3、Ext的Ajax提交
Ext的ajax提交:
handler:function() {
Ext.Ajax.request({
url:'common/ajax/login.jsp',
method:'POST',
params:{
'username':Ext.get("username").dom.value
vartext = eval("("+form.responseText+")");
alert('--------------2='+ text.msg);
},
failure:function() {
alert('--------------1');
}
})
}
//第二种方式
/*
handler:function() {
//document.location='index.html';
Ext.Msg.alert('成功', action.result.msg);
} else {
Ext.Msg.alert('登陆错误', action.result.msg);
}
},
failure:function(form, action) {
},
提交按钮:
handler:function() {
loginForm.form.submit();
}
2、默认提交方式(Ajax)
默认的提交方式:
Ext属性详细信息
Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel,其xtype值为window。
1、主要配置项closable:是否允许关闭窗⼝,默认为true。
closeAction:关闭窗⼝的动作,包括以下两种:close:从DOM删除窗⼝,销毁窗⼝及其所属组件,窗⼝不再可⽤,重新显⽰需要调⽤show⽅法。
此为默认值。
hide:通过设置可见性隐藏窗⼝,窗⼝还可⽤,调⽤show⽅法后重新显⽰。
constrain:是否约束窗⼝只能在容器内移动,默认为false。
窗⼝默认渲染到document.body。
constrainHeader:是否约束窗⼝头部只能在容器内移动,默认为false。
draggable:是否可拖曳,默认为true。
resizable:是否可改变窗⼝的⼤⼩,默认为true。
modal:是否为模式窗⼝,默认为false。
maximizable:是否可最⼤化窗⼝,默认为false。
maximized:是否在初始化时最⼤化显⽰窗⼝,默认为false。
x:窗⼝的X坐标值。
y:窗⼝的Y坐标值。
manager:WindowGroup的引⽤。
expandOnShow:是否在窗⼝显⽰时展开它,默认为true。
当取值为false时,collapsed取值为true时,窗⼝初始显⽰时收缩。
minimizable:是否可最⼩化窗⼝,默认为false。
需要⾃定义最⼩化⾏为。
defaultButton:当窗⼝获得焦点时,默认获得焦点的按钮。
plain:主体背景是否透明,默认为false。
2、主要⽅法:show( [String/Element animateTarget], [Function callback], [Object scope] ):显⽰窗⼝。
hide( [String/Element animateTarget], [Function callback], [Object scope] ):隐藏窗⼝。
如何在JavaScript中实现表单验证和数据校验
如何在JavaScript中实现表单验证和数据校验表单验证和数据校验在JavaScript中是非常重要的,它们可以帮助我们确保用户在提交表单时输入有效的数据。
本文将介绍如何使用JavaScript实现表单验证和数据校验。
一、使用JavaScript实现表单验证在JavaScript中,可以使用一些常用的方法和技巧来验证表单的输入。
以下是实现表单验证的步骤:1.获取表单元素:首先,需要使用JavaScript选择器获取表单元素。
可以使用getElementById()、getElementsByTagName()或querySelector()等方法来获取表单元素。
2.添加事件监听器:接下来,可以使用addEventListener()方法为表单元素添加一个submit事件监听器。
这样,当用户提交表单时,可以触发相应的验证逻辑。
3.编写验证逻辑:在事件监听器中,可以编写一些验证逻辑。
例如,可以检查输入框是否为空、检查邮箱地址格式是否正确等。
可以使用正则表达式、条件语句等来实现不同的验证逻辑。
4.验证结果提示:最后,根据验证结果,可以使用alert()、innerHTML()或console.log()等方法来提示用户验证结果。
以下是一个示例代码,演示了如何使用JavaScript实现简单的表单验证:```javascript//获取表单元素var form = document.getElementById('myForm');//添加事件监听器form.addEventListener('submit', function(event) {//阻止表单默认提交行为event.preventDefault();//获取输入框的值var name = document.getElementById('name').value;//验证逻辑if (name === '') {alert('请输入姓名');} else {alert('提交成功');form.reset();}});```二、使用JavaScript实现数据校验除了表单验证,JavaScript还可以用于对数据进行校验。
前端开发中的表单验证常见问题解决方法
前端开发中的表单验证常见问题解决方法在网页开发过程中,表单验证是不可或缺的一部分。
通过表单验证,我们可以确保用户输入的数据的合法性和正确性,提高用户体验和数据安全性。
然而,在实际开发中,我们常常会遇到一些表单验证方面的问题,本文将介绍一些常见问题的解决方法。
一、空值验证在用户提交表单时,我们首先需要验证是否有必填字段为空。
一种常见的解决方法是使用JavaScript对表单进行提交前的检测。
我们可以通过遍历表单中的所有字段,检查其值是否为空。
如果为空,则显示错误信息,并阻止表单的提交。
另外,我们还可以使用HTML5中的"required"属性对必填字段进行标记,在表单提交时自动进行验证。
二、格式验证除了空值验证外,我们还需要对用户输入的数据格式进行验证。
例如,验证电子邮件地址格式、手机号码格式、密码强度等。
对于电子邮件地址格式验证,我们可以使用正则表达式。
例如:```javascriptfunction validateEmail(email) {var re = /\S+@\S+\.\S+/;return re.test(email);}```对于手机号码格式验证,我们可以使用正则表达式或第三方库,如手机号码归属地查询API,对其进行验证。
对于密码强度验证,我们可以使用正则表达式,或者通过计算密码的长度、包含字符类型(大小写字母、数字、特殊字符)等指标,进行评估。
三、实时验证在用户填写表单时,我们还可以进行实时验证,即用户输入内容后即时展示验证结果。
例如,在用户输入密码时,我们可以动态显示密码强度的提示信息。
当用户输入的密码满足一定的强度要求时,我们可以显示一个绿色的进度条,提醒用户密码安全性良好。
实时验证不仅可以引导用户正确输入,还可以提高用户体验。
四、表单重复提交在用户提交表单后,我们需要避免表单的重复提交,以免造成数据的重复录入或其他问题。
为了解决这个问题,我们可以在表单提交时使用禁用按钮的方式,防止用户重复点击提交按钮。
Extjs4分享手册
Extjs布局
Extjs布局分为容器布局和组件布局两大类。 容器布局:
组件布局:Dock、Tool、Field、TriggerField
容器布局
一、Auto layout 说明:组件在容器中原样排列
二、Anchor layout 说明:组件通过anchor属性,out 说明:继承自Anchor布局,可以同通过x、y 属性设置组件同容器左上角的距离。
如下页面:
获取id为text1的html控件:Ext.getDom(“text1”) 获取第一个input控件:Ext.query("input")[0] 获取id为text2的ext元素:Ext.get(“text2”) 获取id为textfield1的ext元素:Ext.get("textfield1") 获取id为textfield2的ext组件:Ext.getCmp(“textfield2”) 获取第一个textfield组件:ponentQuery.query(“textfield”)*0+ 获取textfiled1相邻的textfield2:Ext.getCmp("textfield1").next("textfield") 获取textfieldchild1的父panel:Ext.getCmp(“textfieldchild1”).up(“panel”) 获取panel下面的第一个textfield组件: ponentQuery.query("panel[title=Extjs控件]")[0].down("textfield")
Chapter:
Ext.define ('Chapter', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'number', type: 'int'}, {name: 'title', type: 'string'}, {name: 'bookId', type: 'int'} ] }); 说明:hasMany有以下的配置项 model :关联对象的model名称 name::关联的模型别名,用来获取关联对象数据,如果没有,默认为model名称加上“s” primaryKey :主键,主对象用于关联的属性名称,默认为id foreignKey:外键,关联对象用于关联的属性名称,默认为关联对象model名称加上“_id” filterProperty :过滤数据,只需要指定数据关联
前端开发中的表单验证和数据校验方法
前端开发中的表单验证和数据校验方法随着互联网的快速发展,前端开发在网站和应用程序的构建中起着至关重要的作用。
在用户与网站或应用程序进行交互时,表单验证和数据校验是确保数据的准确性和安全性的重要步骤。
以下是一些常用的表单验证和数据校验方法:一、前端表单验证方法1. 必填项验证:在表单提交之前,确保所有必填字段都已填写。
可以使用HTML5的"required"属性来标记必填字段。
若用户未填写必填字段,系统会自动提示并要求填写。
2. 邮箱验证:验证用户输入的邮箱地址是否合法。
可以使用正则表达式来匹配邮箱的格式,例如:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/3. 手机号验证:验证用户输入的手机号码是否合法。
可以使用正则表达式来匹配手机号码的格式,例如:/^1[3|4|5|7|8][0-9]\d{8}$/4. 密码验证:验证用户输入的密码是否符合要求。
可以设置一定的规则,如密码长度大于等于6位,同时包含字母和数字等。
5. 图片验证码:为了防止恶意行为和机器人攻击,可以要求用户输入一个图片验证码。
用户需要输入正确的验证码才能提交表单。
6. 表单重复提交限制:为了防止用户多次提交表单,可以通过禁用提交按钮来限制表单的多次提交。
二、前端数据校验方法1. 数据类型校验:校验用户输入的数据类型是否与预期一致。
可以使用JavaScript中的typeof运算符来判断数据类型,如:typeof value === 'string'、typeof value === 'number'等。
2. 数字范围校验:校验数值型数据是否在允许范围内。
通过比较用户输入的数值与设定的最小值和最大值来实现。
3. 数据长度校验:校验字符串类型的数据是否符合长度要求。
可以使用JavaScript内置的length属性来获取字符串长度,并与设定的长度进行比较。
Ext form表单中各种属性应用详解
Ext form表单中各种属性应用详解Ext.form表单中各种属性应用详解继承自Ext.form.TextField因为Ext.form.TextField虽然强大但写起来的确还是有点麻烦后面的类都继承自Ext.form.TextField没有自定义的方法属性和事件config定义为allowDecimals : Boolean //true allowNegative : Boolean //true baseChars : String //0123456789 decimalPrecision : Number //精度默认值2 decimalSeparator : String //小数分隔符fieldClass : String //默认样式为x-form-field x-form-num-field maxText : String maxValue : Number //默认Number.MAX_V ALUE minText : String minValue : Number //默认Number.NEGATIVE_INFINITY nanText : String //NaN时显示Ext.form.TextArea config autoCreate : String/Object //tag: textarea style: width:100pxheight:60px autocomplete: off growMax : Number //1000 growMin : Number //60 preventScrollbars : Boolean //如果为真等于设置overflow: hidden默认为false Ext.form.TriggerField 这个类只要text旁边加了个下拉按钮要自己实现onTriggerClick config autoCreate : String/Object //tag: input type: text size: 16 autocomplete: off hideTrigger : Boolean //隐藏trigger就是右边的那个下拉选择框triggerClass : String 事件onTriggerClick EventObject e : void Ext.form.DateField 继承自TriggerField用于日期选择config altFormats : String //转换用户输入到日期时的格式默认m/d/Ym-d-ym-d-Ym/dm-dd autoCreate : String/Object //tag: input type: text size: 10 autocomplete: off disabledDates : Array //禁止选择的日期:例0304/../200609/16/2003不让选3月2006年4月2003年9月16 disabledDatesText : String //不让选总得给个理由吧disabledDays : Array //不让选星期几例06不让选周六周日disabledDaysText : String //周日要休息这就是理由format : String //显示时的格式invalidText : String //验证非法时的提示maxText : String maxValue : Date/String minText : String minValue : Date/String triggerClass : String 方法除了构造多了两个顾名思义的方法DateField Object config getValue : Date setValue String/Date date : void boBox config allQuery : String // autoCreate : Boolean/Object //tag: input type: text size: 24 autocomplete: off displayField : String //显示字段editable : Boolean //true当然就是combobox了如果不可编辑就是一个select了forceSelection : Boolean handleHeight : Number //如果resiable为真时设置hiddenName : String lazyInit : Boolean //除非得到焦点才开始初始化列表默认为真lazyRender : Boolean //除非请求才开始输出默认为假listAlign : String //对齐方式参见Ext.Element.alignTo默认为tl-bl listClass : String listWidth : Number loadingText : String //仅当mode remote时调用数据时显示的文本maxHeight : Number //300 minChars : Number //最少输入多少个字开始响应远程时默认为4本地为0如果不可编辑则此值无效minListWidth : Number mode : String //可选值local/remote 之一从本地还是远程取数据pageSize : Number //在远程模式下如果此值大于0会在底部显示一个翻页工具条queryDelay : Number //查询延时远程默认为500本地10 queryParam : String //查询参数默认为query resizable : Boolean selectOnFocus : Boolean selectedClass : String shadow : Boolean/String //True或sides为默认风格frame for 4-way shadow and drop for bottom-right store : Ext.data.Store title : String transform : Mixed //对应一个select元素可以将select转为combobox对象triggerAction : String //点击按钮时的动作.默认为query triggerClass : String typeAhead : Boolean //false typeAheadDelay : Number //250 valueField : String valueNotFoundText : String //值不存在时的提示信息属性view : Ext.DataView 方法ComboBox Object config 构造clearValue : void 清除所有文本/值对collapse : void expand : void 收起/展开下拉列表doQuery String query Boolean forceAll : void 执行查询getValue : String 选择当前字段的值isExpanded : void 下拉列表是展开的select Number index Boolean scrollIntoView : void 选中第index列表项selectByValue String value Boolean scrollIntoView : Boolean 选中值为value的列表项setEditable Boolean value : void 设editable属性为valuesetValue String value : void 设置当前值为事件beforequery : Object queryEvent beforeselect : boBox combo Ext.data.Record record Number index collapse : boBox combo expand : boBox combo select : boBox combo Ext.data.Record record Number index Ext.form.TimeField 继承自combobox用于选择时间config altFormats : String // format : String increment : Number //时间增长间隔默认15 invalidText : String maxText : String maxValue : Date/String minText : String minValue : Date/String 总的来说Ext.form对input typetext select 这样的输入标签都有对应的类并对有些标签做了简单的扩展当然很重要的一点漂亮多了vtype属性也方便了处理建议有兴趣的同胞对Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展form中还有两个类比如下例中的FormPanel和FieldSet 都继承自panel所以会放在panel中解释综合示例Ext.QuickTips.init var arr 1 本.拉登2 笨.拉登3 笨.拉灯var reader new Ext.data.ArrayReader ...id: 0 : value : key var storenew Ext.data.Store... reader:reader store.loadDataarr var htmleditornew Ext.form.HtmlEditor... fieldLabel:htmleditor width:450 fontFamilies:宋体隶书name:editor id:editor var form new Ext.FormPanel... labelWidth: 75 url:post.php frame:true width: 800 defaultType: textfield items: new Ext.form.Checkbox... //checkbox fieldLabel:checkbox name:cb checked:true boxLabel:checkbox new Ext.form.FieldSet... //radio border:false title:radio items: new Ext.form.Radio... labelSeparator: name:radio checked:true boxLabel:radio 1 new Ext.form.Radio... labelSeparator: name:radio checked:true boxLabel:radio 2 new Ext.form.Hidden... //hidden name:hidden htmleditor new Ext.form.TextField... //text fieldLabel:text name:text grow:true allowBlank:false blankText : 这个字段最好不要为空maskRe:/a-zA-z/gi new Ext.form.NumberField... //NumberField allowNegative:true fieldLabel:number name:number new Ext.form.TextArea... //TextArea fieldLabel:textarea name:textarea new Ext.form.TriggerField... //TriggerField fieldLabel:TriggerField name:TriggerField new boBox... //select fieldLabel:select editable:false triggerAction: all valueField:value displayField:key mode: local store:store new boBox... //combobox fieldLabel:ComboBox displayField:key mode: local store:store new Ext.form.DateField... //DateField fieldLabel:DateField format:Y-m-d disabledDays:06 new Ext.form.TimeField...//TimeField fieldLabel:TimeField mode: local increment:60 form.renderdocument.body htmleditor.setRawValuehello world htmleditor.syncValue。
ext问题及解决
}
}
return true;
},
结束时间验证函数:
validator : function(){
var startTime = Ext.getCmp('startTime').getValue();
12.TreeGrid重新加载数据
tree.getLoader().dataUrl= dataURL;
tree.getLoader().load(tree.getRootNode());
13.extjs的定时器
在Ext的API里有这样一段实例代码
var task = {
function(){
var len = selections.length;
for(var i=0;i<len;i++)
memberStore.remove(selections[i]);
4.由一个JSON对象产生一个包含Ext.data.Records的对象块
var json = {
3.editable:false//false则不可编辑,默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name,请一定要注意
这样就是隔一段时间执行某个方法
if(startTime){
if(startTime >this.getValue()){
Ext.form各类控件的配置及方法
Ext.form各类控件的配置及⽅法1、Ext.form.Action配置项:success:执⾏成功后回调的函数,包括两个参数:form和actionfailure:执⾏失败后回调的函数,包括两个参数:form和actionmethod:表单的提交⽅式,有效值包括GET、POSTparams:传递到请求中的参数url:动作提交的路径waitMsg:动作执⾏时显⽰的等待信息属性:Action.CLIENT_INVALID:客户端验证错误Action.CONNECT_FAILURE:通信错误Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回Action.SERVER_INVALID:服务端验证错误failureType:错误类型result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}type:动作类型,可选值有submit和loadExt.form.Action.Submit:返回的信息中要包含⼀个布尔类型的success属性和⼀个可选的errors属性 Ext.form.Action.Load:返回的信息中要包含⼀个布尔类型的success属性和⼀个data属性2、Ext.form.BasicForm配置项:baseParams:传递到请求中的参数method:表单的提交⽅式,有效值包括GET、POSTurl:表单默认的提交路径fileUpload:表单是否进⾏⽂件上传timeout:表单动作的超时时间,默认为30秒trackResetOnLoad:是否在表单初次创建时清楚数据⽅法:doAction( String/Object actionName, [Object options] ):执⾏⼀个预订的动作,可⽤选项包括:url:动作提交的路径method:表单的提交⽅式,有效值包括GET、POSTparams:传递到请求中的参数headers:success:执⾏成功后回调的函数,包括两个参数:form和actionfailure:执⾏失败后回调的函数,包括两个参数:form和actionclientValidation:是否客户端验证clearInvalid():清除表单中所有的⽆效验证信息findField( String id ):查找表单字段getValues( [Boolean asString] ):isDirty():表单数据是否被更改过isValid():客户端验证是否成功load( Object options ):执⾏表单读取动作loadRecord( Record record ):从⼀个数据记录中读取数据到表单中markInvalid( Array/Object errors ):成批设置表单字段为验证⽆效reset():重置表单setValues( Array/Object values ):成批设置表单字段值submit( Object options ):执⾏表单提交动作updateRecord( Record record ):持久化表单数据到记录集中3、Ext.form.FormPanel配置项:items:⼀个元素或元素数组buttons:⼀个按钮配置对象的数组,按钮将被添加到表单页脚中buttonAlign:按钮的对齐⽅式,可选值有left、center、right,默认为centerlabelWidth:表单标签的宽度labelAlign:表单标签的对齐⽅式,可选值有left、top、right,默认为leftlabelSeparator:字段标签与字段之间的分隔符,默认为':'minButtonWidth:按钮的最⼩宽度,默认为75⽅法:getForm() : Ext.form.BasicFormload( Object options )startMonitoring()stopMonitoring()4、Ext.form.Field配置项:name:字段名value:字段的初始化值disabled:字段是否不可⽤,默认为falsefieldLabel:字段标签说明hideLabel:隐藏字段标签,默认为falselabelSeparator:字段标签与字段之间的分隔符,默认为':'labelStyle:字段标签样式inputType:默认为textinvalidClass:默认为x-form-invalidinvalidText:字段⾮法⽂本提⽰msgTarget:错误信息显⽰的位置,默认为qtipqtip:显⽰⼀个浮动的提⽰信息title:显⽰⼀个浏览器的浮动提⽰信息under:在字段下⽅显⽰⼀个提⽰信息side:在字段右边显⽰⼀个提⽰信息readOnly:字段是否只读,默认为falsevalidateOnBlur:字段在失去焦点时被验证,默认为true ⽅法:clearInvalid():getRawValue()setRawValue( Mixed value )getValue()setValue( Mixed value )isDirty():字段值在装载后是否被修改过isValid( Boolean preventMark ):当前字段值是否合法markInvalid( [String msg] )validate()reset()5、Ext.form.Hidden6、bel配置项:html:text:7、Ext.form.TextField配置项:allowBlank:是否允许为空,默认为trueblankText:空验证失败后显⽰的提⽰信息emptyText:在⼀个空字段中默认显⽰的信息grow:字段是否⾃动伸展和收缩,默认为falsegrowMin:收缩的最⼩宽度growMax:伸展的最⼤宽度inputType:字段类型:默认为textmaskRe:⽤于过滤不匹配字符输⼊的正则表达式maxLength:字段允许输⼊的最⼤长度maxLengthText:最⼤长度验证失败后显⽰的提⽰信息minLength:字段允许输⼊的最⼩长度minLengthText:最⼩长度验证失败后显⽰的提⽰信息regex:正则表达式regexText:正则表达式验证失败后显⽰的提⽰信息vtype:验证类型的名字alpha:限制只能输⼊字母alphanum:限制只能输⼊字母和数字emailurlvtypeText:验证失败时的提⽰信息validator:⾃定义验证函数selectOnFocus:当字段得到焦点时⾃动选择已存在的⽂本,默认为false 8、Ext.form.TextArea配置项:preventScrollbars:是否禁⽌出现滚动条,默认为false9、Ext.form.NumberField配置项:allowDecimals:是否允许输⼊⼩数,默认为trueallowNegative:是否允许输⼊负数,默认为truebaseChars:输⼊的有效数字集合,默认为'0123456789'decimalPrecision:数字的精度,默认保留⼩数点后2位decimalSeparator:⼗进制分隔符,默认为'.'maxValue:允许输⼊的最⼤数值maxText:超过最⼤值之后的提⽰信息minValue:允许输⼊的最⼩数值minText:超过最⼩值之后的提⽰信息nanText:输⼊⾮有效数值之后的提⽰信息10、Ext.form.Checkbox配置项:boxLabel:复选框的⽂字描述checked:复选框是否被选择,默认为falsehandler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checkedinputValue:⽅法:getValue():返回复选框的checked状态setValue( Boolean/String checked ):11、Ext.form.CheckboxGroup配置项:allowBlank:是否允许不选择,默认为trueblankText:columns:显⽰的列数,可选值包括:固定值auto、数值、数组(整数、⼩数)items:对象数组vertical:是否垂直⽅向显⽰对象,默认为false12、Ext.form.Radio⽅法:getGroupValue():setValue( value {String/Boolean} ):13、Ext.form.RadioGroup配置项:allowBlank:blankText:14、boBox配置项:displayField:被显⽰在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输⼊值是否严格为待选列表中存在的值。
Ext获取表单中列行值
p) disableSelection:是否禁止选择表格行或列
q) enableDragDrop:是否允许表格列的拖放操作。
r) enableHdMenu:是否显示表格列的菜单。
s) frame:边框是否显示
t) loadMask: 是否显示加载动画
var cell = grid.getSelectionNode().getSelectedCell();
得到过一下语句得到该单元格数据
Js代码
var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
处理方法如下:
定义一个全局变量,初始值为0;DomUrl函数如下
Js代码
function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
k) un():解除组件的监听
l) on():为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
EXT表单组件常见属性介绍(三)
EXT表单组件常见属性介绍(三)本范例展⽰如何使⽤表单的各种组件。
下拉框组件展⽰了5种使⽤范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";3. Ext.QuickTips.init();4. Ext.form.Field.prototype.msgTarget = "qtip";5.6. //component7. var hiddenField = new Ext.form.Hidden({8. name: "hiddenField",9. value: "1"10. });11.12. var usernameField = new Ext.form.TextField({13. name: "username",14. fieldLabel: "⽤户名",15. allowBlank: true,16. blankText: "请输⼊⽤户名!"17. });18.19. var pwdField = new Ext.form.TextField({20. name: "password",21. fieldLabel: "密码",22. allowBlank: true,23. blankText: "请输⼊密码!",24. inputType: "password"25. });26.27. var ageField = new Ext.form.NumberField({28. name: "age",29. allowBlank: true,30. blankText: "请输⼊年龄!",31. fieldLabel: "年龄",32. allowDecimals: false,33. allowNegative: false,34. minValue: 18,35. minText: "年龄不能少于18",36. maxValue: 100,37. maxText: "年龄不能⼤于100"38. });39.40. var love1 = new Ext.form.Checkbox({41. name: "love1",42. boxLabel: "打球",43. inputValue: "1"44. });45.46. var love2 = new Ext.form.Checkbox({47. name: "love2",48. boxLabel: "游泳",49. inputValue: "2"50. });51.52. var love3 = new Ext.form.Checkbox({53. name: "love3",54. boxLabel: "登⼭",55. inputValue: "3"56. });57.58. var loveGroup = new Ext.form.CheckboxGroup({59. name: "love",60. columns: [80, 80, 1.0],61. fieldLabel: "爱好",62. items: [love1, love2, love3]63. });64.65. var sex1 = new Ext.form.Radio({66. name: "sex1",67. boxLabel: "男",68. inputValue: "1"69. });70.71. var sex2 = new Ext.form.Radio({72. name: "sex1",73. boxLabel: "⼥",74. inputValue: "0"75. });76.77. var sexGroup = new Ext.form.RadioGroup({78. name: "sex",79. columns: [80, 1.0],80. fieldLabel: "性别",81. items: [sex1, sex2]82. });83.84. //本地数据源的组合框85. var store = new Ext.data.SimpleStore({86. fields: ["code", "name"],87. data: [88. ["1", "北京"],89. ["5", "上海"],90. ["4", "⼴东"]91. ]92. });93. var cmbProvince = new boBox({94. id: "cmbProvince",95. hiddenName: "province.id",96. fieldLabel: "省份",97. resizable: true,98. editable: false,99. width: 100,100. emptyText: "请选择...",101. store: store,102. valueField: "code",103. displayField: "name",104. triggerAction: "all",105. mode: "local"106. });107.108. //远程数据源的组合框109. var store2 = new Ext.data.SimpleStore({110. fields: ["name"],111. proxy: new Ext.data.HttpProxy({112. url: "../testForm!loadData.action"113. })114. });115.116. var cmbManager = new boBox({117. hiddenName: "manager",118. fieldLabel: "经理",119. editable: false,120. triggerAction: "all",121. mode: "local",122. maxHeight: 200,123. store: new Ext.data.SimpleStore({fields:[],data:[[]]}),124. onSelect: Ext.emptyFn,125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"126. });127.128. var root = new Ext.tree.TreeNode({129. nodeId: 1,130. text: "根节点",131. expanded: true132. });133. root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.136. var tree = new Ext.tree.TreePanel({137. root: root,138. border: false,139. autoHeight: true,140. autoScroll: true141. });142.143. tree.on("click", function(node){144. if(!node.isLeaf()) return; //只能选择叶节点145. //下拉框的隐藏值146. if(cmbManager.hiddenField){147. cmbManager.hiddenField.value = node.attributes.nodeId; 148. }149. cmbManager.setRawValue(node.text); //下拉框的显⽰值150. cmbManager.collapse(); //折叠下拉框151. });152.153. cmbManager.on("expand", function(){154. tree.render("tree");155. });156.157. //分页远程数据源的组合框158. var store3 = new Ext.data.JsonStore({159. url: "../testForm!loadData3.action",160. totalProperty: "totalNum",161. root: "books",162. fields: ["id", "name"]163. });164. var cmbBook = new boBox({165. hiddenName: "books",166. fieldLabel: "书籍",167. store: store3,168. valueField: "name",169. displayField: "name",170. triggerAction: "all",171. mode: "remote",172. queryParam: "books",173. loadingText: "正在装载数据...",174. width: 180,175. minChars: 1,176. editable: false,177. listWidth: 250,178. pageSize: 3179. });180.181. //HTML标准组件182. var cmbPass = new boBox({183. hiddenName: "status",184. fieldLabel: "是否有效",185. triggerAction: "all",186. editable: false,187. width: 100,188. transform: "isPass",189. lazyRender: true190. });191.192. var cmbTimes = new Ext.form.TimeField({193. hiddenName: "time",194. fieldLabel: "时间",195. minValue: "09:00",196. minText: "所选时间应⼤于{0}",197. maxValue: "18:00",198. maxText: "所选时间应⼩于{0}",199. format: "H时i分",200. increment: 30,201. invalidText: "时间格式⽆效!",202. maxHeight: 200,203. width: 100,204. value: "09时00分",205. editable: false206. });207.208. var cmbMonths = new Ext.ux.MultiSelectCombo({209. hiddenName: "months",210. fieldLabel: "⽉份",211. maxHeight: 200,212. editable: false,213. store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]], 214. mode: "local",215. width: 180,216. maxItemsCount: 3,217. maxItemsCountText: "最多只能选择三个选项!"218. });219.220. var cmbBirths = new Ext.form.DateField({221. name: "births",222. fieldLabel: "出⽣⽇期",223. disabledDays: [0,6],224. disabledDaysText: "禁⽌选择周末!",225. width: 100,226. readOnly: true,227. format: "Y-m-d",228. invalidText: "不是有效的⽇期值!"229. });230.231. var fieldSet1 = new Ext.form.FieldSet({232. title: "下拉框",233. checkboxName: "fieldSet1",234. checkboxToggle: true,235. autoHeight: true,236. layout: "table",237. layoutConfig: {238. columns: 3239. },240. defaults: {241. style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",242. layout:"form",243. labelAlign: "right"244. },245. items: [246. {rowspan:1, colspan:1, items:[cmbProvince]},247. {rowspan:1, colspan:1, items:[cmbManager]},248. {rowspan:1, colspan:1, items:[cmbBook]},249. {rowspan:1, colspan:1, items:[cmbPass]},250. {rowspan:1, colspan:1, items:[cmbTimes]},251. {rowspan:1, colspan:1, items:[cmbMonths]},252. {rowspan:1, colspan:1, items:[cmbBirths]}]253. });254.255. var remarksField = new Ext.form.TextArea({256. name: "remarks",257. fieldLabel: "备注",258. width: 400,259. height: 80260. });261.262. var form = new Ext.form.FormPanel({263. id: "frmAddUser",264. title: "新增⽤户",265. autoWidth: true,266. autoHeight: true,267. frame: true,268. renderTo: Ext.getBody(),269. labelWidth: 70,270. tbar: toolbar,271. items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 272. fieldSet1, remarksField],273. url: "../testForm!ajaxSubmitForm.action"274. });275. });Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";。
前端开发中的表单验证与用户输入处理
前端开发中的表单验证与用户输入处理随着互联网的快速发展,前端开发在网站和移动应用的开发过程中变得越来越重要。
而表单验证和用户输入处理是其中不可或缺的一环。
本文将讨论前端开发中的表单验证和用户输入处理的方法和技巧。
一、表单验证的重要性在网站和移动应用中,表单是用户与系统进行互动的重要渠道。
例如注册、登录、购物等过程,都需要用户在表单中输入相关信息。
为了确保数据的准确性和完整性,表单验证变得至关重要。
表单验证的目的是检查用户输入是否符合预定的规则和要求。
这可以防止用户犯错,也可以防止系统受到恶意攻击。
二、常见的表单验证方法1.必填字段验证:某些字段是必填的,即用户必须填写才能进行下一步操作。
在前端开发中,可以通过设置必填字段的属性,如"required"来实现验证。
当用户未填写必填字段时,系统会给出提示信息,要求用户补充。
2.格式验证:某些字段需要满足特定的格式要求,如电子邮件地址、手机号码、身份证号码等。
在前端开发中,可以利用正则表达式来验证特定字段的格式是否正确。
如果用户输入的格式不符合要求,系统会提醒用户进行修改。
3.长度验证:某些字段有长度限制,不得超过一定的字符数。
在前端开发中,可以通过设置字段的"maxlength"属性来实现长度验证。
如果用户输入超过限制的字符数,系统会提醒用户进行删减。
4.唯一性验证:某些字段需要保证其值在系统中是唯一的,如用户名、邮箱地址等。
在前端开发中,可以通过Ajax技术向后端发送请求,查询数据库中是否已存在相同的值。
如果存在重复值,系统会提醒用户使用其他的值。
三、用户输入处理的技巧除了表单验证,用户输入处理也是前端开发中需要考虑的重要方面。
1.实时反馈:在用户输入过程中,及时给予反馈可以提高用户体验。
例如,在密码输入框中,可以实时显示密码的强度。
在搜索框中,可以实时显示匹配的搜索结果。
这些实时反馈可以使用户感到输入的准确性和及时性。
extjs最常用的表单
常用配置项
baseParams : Object, //请求时的附加参数,格式为{id: '123', foo: 'bar'} errorReader : DataReader, //提交时发生验证错误,这个dataReader将会被 使用 fileUpload : Boolean, //支持文件上传 method : String, //GET或者POST reader : DataReader, //load时使用的数据读取器 timeout : Number, //超时时间 trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值 url : String //form要提交的url地址
常用方法 onTriggerClick( EventObject e ) : void
boBox
支持自动完成,远程加载数据,分页等特性,是开 发中使用频率非常高的组件。 本地数据example26 此组合框包括的特点 1)允许用户输入但是要求输入值必须是列表中已存 在的条目 2)在用户输入过程中自动匹配选择剩余的文本 3)用户可以自由改变下拉列表的大小 这三个需求通过设置forceSelection typeAhead和 resizable实现。
继承自Ext.form.Checkbox,单选框 多了一个方法 getGroupValue() : String如果单选框是一组 radio 的一部分,取当前选中的值 Ext.form.Hidden继承自Field,隐藏字段,无新 特性
Ext.form.TriggleField
增加了一个单击的触发按钮,必须指派函数, 可以直接创建,也可以作为基类扩展,如 boBox组件和 Ext.form.DataField组件 example25
form表单验证方法
form表单验证方法(最新版4篇)目录(篇1)1.表单验证的重要性2.form 表单验证方法的概述3.表单验证的方法4.表单验证的实践示例5.表单验证的优缺点分析6.表单验证的未来发展趋势正文(篇1)在现代 Web 开发中,表单验证是一项必不可少的任务。
它不仅能确保用户输入的数据格式正确,还可以保证业务逻辑的顺利进行。
form 表单验证方法是实现表单验证的一种有效方式,它为我们提供了许多便捷的工具和方法。
首先,让我们了解一下表单验证的方法。
表单验证主要包括客户端验证和服务器端验证。
客户端验证是指在用户提交表单之前,通过JavaScript 等脚本语言对表单数据进行验证。
这种方式的优点是实时反馈,用户体验较好。
服务器端验证则是在接收到表单数据后,通过服务器端的编程语言进行验证。
这种方式的优点是可以保证数据的正确性,但可能会增加服务器负担。
接下来,我们通过一个实践示例来具体了解表单验证的过程。
假设我们要验证一个用户名和密码的表单,我们可以在客户端通过 JavaScript 编写如下代码:```javascriptfunction validateForm() {var username =document.forms["loginForm"]["username"].value;var password =document.forms["loginForm"]["password"].value;if (username == "" || password == "") {alert("用户名和密码不能为空");return false;}if (username.length < 6) {alert("用户名不能少于 6 个字符");return false;}if (!/^[a-zA-Z]*$/.test(username)) {alert("用户名只能包含字母");return false;}if (!/^[a-zA-Z0-9]*$/.test(password)) { alert("密码只能包含字母和数字");return false;}return true;}```在服务器端,我们可以使用 Python 编写如下代码进行验证:```pythondef validate_form(username, password):if not username or not password:return False, "用户名和密码不能为空"if len(username) < 6:return False, "用户名不能少于 6 个字符"if not username.isalpha():return False, "用户名只能包含字母"if not password.isalnum():return False, "密码只能包含字母和数字"return True```通过这个示例,我们可以看到表单验证的实际应用过程。
ext根据条件判断单元格是否可编辑
Extjs根据条件判断单元格是否可编辑
功能说明:
根据后台数据判断该行数据的某些字段是否可编辑,
这里会对字段大小和字段精度进行设置
展示图:
提示:
单元格如果设置editor : true 的话,是可编辑的
Chrome 浏览器,控制台展现:
这里我打印的是record,具体代码如下:
核心代码:
代码解释:
1.cellclick:ext自带的单元格点击事件。
2.参数thisTable : 当前表格,ext格式
3.参数td :鼠标点击的某个单元格数据,html格式展现
4.参数cellIndex : 鼠标点击的单元格在该行数据中的位置, 索引从1开始
5.参数record : 展现当前选择数据行,ext格式
6.参数tr : 鼠标点击某行,html格式展现该数据
7.参数rowIndex: 鼠标点击的行数据在数据列表中的位置,索引从0开始
8.参数e :e xt格式
9.参数Opts :用的少
在if语句用,record.data.isDefineSize获取到isDefineSize的数据,与0进行比对,这里的数据从后台传来,个人设置为0时,字段大小和字段精度是不能编辑的,
即if语句后分支的(cellIndex == 5 || cellIndex == 6),这2个数据在数据行中位于第5和第6列,返回false的话,该单元格数据无法编辑。
返回true的话可编辑。
fastadmin表单验证
fastadmin表单验证Unexpected token < in JSON at position 0注意:if (!form.is("form"))//form的选择器不是form直接返回所以调⽤的时候不要⽤id和class如Form.api.bindevent("#form,.deform");return;元素加上 data-rule='规则' 且需要Form.api.bindevent("form[role=form]");总表单事件进⾏组件初始化或者单独调⽤Form.events.validator($("form"));验证事件规则:required字段必填requiredchecked必选,只适⽤于checkbox和radio checkedmatch(name)当前字段值必须和 name 字段的值匹配match('row[username]')remote(URL)请求服务端验证remote('validate/check_username_unique')integer整数integerrange(n~)数值范围, 请填写不⼩于 n 的数range(3~)length(n)请填写 n 个字符length(3)filter过滤 <>`"' 和字符实体编码的字符filterdigits必须为数字digitsletters必须为字母lettersdate必须为⽇期,yyyy-mm-dd格式datetime必须为时间,hh:ii格式timeemail必须为email格式emailurl必须为URL链接urlqq必须为QQ号qqIDcard必须为⾝份证号码IDcardtel必须为电话号码telmobile必须为⼿机号码mobilezipcode必须为邮箱zipcodechinese必须为中⽂字符chineseusername必须为3-12位数字、字母、下划线usernamepassword必须为6-16位字符,不能有空格password以及更多的使⽤⽅法请参考城市选择器参考。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2.blankText:string//当为空时的错误提示信息
js代码为:
var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
id:"blanktest",
}
]
});
2.用vtype格式进行简单的验证。
在此举邮件验证的例子,重写上面代码的items配置:
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
allowBlank : false //此验证依然有效.不许为空.
id:"pass1",
},{ ห้องสมุดไป่ตู้
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"pass1",//要比较的另外一个的组件的id
}
4.使用正则表达式验证
3.email//email验证,要求的格式是"langsin@"
4.url//url格式验证,要求的格式是
3.高级自定义密码验证
前面的验证都是extjs已经提供的,我们也可以自定义验证函数。
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
regexText:"只能输入中文!", //正则表达式错误提示
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能为空",
allowBlank:false, //不允许为空
blankText:"不能为空", //错误提示信息,默认为This field is required!
title-在浏览器的标题显示,但是测试结果是和qtip一样的;
under-在控件的底下显示错误提示;
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值;
id-[element id]错误提示显示在指定id的HTML元件中
1.一个最简单的例子:空验证
//空验证的两个参数
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:
//form验证中vtype的默认支持类型
1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items参数
items:[{fieldLabel:"密码",
//放在onReady的function(){}中
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为:
qtip-当鼠标移动到控件上面时显示提示;
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值