为什么提交按钮在 extjs 中仍然有效，即使使用 vtype 的电子邮件验证失败

Why submit button still works in extjs even if email validation with vtype is failed?

本文关键字：vtype 失败 验证 电子邮件 有效 按钮 提交 extjs 为什么      更新时间：2023-09-26

下面是一个带有邮箱的窗口面板的extjs代码，我使用vtype：email来检查验证。该框显示无效电子邮件的错误，但提交按钮仍然有效。当用户单击按钮时，如何抛出无效的电子邮件错误？

    {
    vtype:'email',
    name: 'email',
    fieldLabel: 'Email',
    allowBlank:false,
    id: 'inviteEmail'
     },{
   xtype: 'button',
    text: 'Send',
    id: 'invitebuttonid',
    handler: function(btn){
    var email = Ext.getCmp('inviteEmail').getValue(); 
    var box = Ext.MessageBox.wait('Sending The Invitation..', 'Inviting User')
        Ext.Ajax.request({
         url: 'url',
               params:{
                   email: email
 },
            timeout: 300000,
            method: 'POST',
            success: function(response, opts){
                var result = Ext.decode(response.responseText);
                if (result.success === true) {
                    Ext.example.msg('Success',  result.message);
                    box.hide();
                }
                else {
                    Ext.Msg.alert('Failed', result.message);
                }
            },
            failure: function(response, opts){
                var result = Ext.decode(response.responseText);
                Ext.Msg.alert('Failed');
            }
        });
    }
要根据

表单状态自动激活或停用按钮，您需要添加配置formBind: true。

{
    xtype: 'button',
    text: 'Send',
    id: 'invitebuttonid',
    formBind: true,
    ...
}

在提交之前检查 form.isValid（）。通过获取值并自行发出 Ajax 请求来绕过验证。

尝试 

var form = this.up('form');
If (form.isValid()) {
     // your handler code
相关文章：