在Ext JS中,可以通过使用表单的getForm()方法来获取表单对象,然后使用表单对象的isValid()方法来验证表单字段的有效性。在submit事件中,可以通过监听事件的回调函数中使用这些方法来获取和验证表单字段。
以下是一个示例代码:
Ext.create('Ext.form.Panel', {
title: 'My Form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}],
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// 表单字段验证通过,可以进行提交操作
form.submit({
url: 'submit.php',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
在上述代码中,我们创建了一个表单面板,并添加了两个文本字段。其中,Name字段设置了allowBlank: false
,表示该字段不能为空;Email字段设置了vtype: 'email'
,表示该字段必须符合邮箱格式。
在提交按钮的点击事件处理函数中,我们首先通过this.up('form').getForm()
获取到表单对象,然后使用isValid()
方法验证表单字段的有效性。如果验证通过,则调用submit()
方法提交表单数据。
需要注意的是,上述代码中的提交操作是一个示例,实际情况中需要根据具体需求来修改提交的URL和处理成功/失败的回调函数。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。您可以通过以下链接了解更多信息:
领取专属 10元无门槛券
手把手带您无忧上云