ExtJS中如何为fieldset内字段配置正则校验并实现失焦触发？

嘿，我来帮你搞定这个ExtJS表单校验的问题！要给Country字段加上失焦时的正则校验，同时用Ext.applyIf来实现，其实很简单，下面一步步给你说明：

核心思路 #

Ext.applyIf的作用是把源对象的属性合并到目标对象，但仅覆盖目标对象中不存在的属性，刚好可以用来给字段补充校验相关的配置。另外，要让字段在失焦时自动触发校验，我们需要确保validateOnBlur属性开启（默认就是true，不过显式配置更稳妥）。

修改后的代码示例 #

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'About You',
            instructions: 'Tell us all about yourself',
            items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name'
                },
                {
                    xtype: 'textfield',
                    name : 'lastName',
                    label: 'Last Name'
                },
                // 用立即执行函数封装，结合Ext.applyIf配置校验规则
                (function() {
                    // 先定义字段的基础配置
                    const countryFieldBase = {
                        xtype: 'textfield',
                        name : 'country',
                        label: 'Country',
                        allowBlank: false
                    };
                    // 用Ext.applyIf添加校验规则和失焦触发配置
                    Ext.applyIf(countryFieldBase, {
                        regex: /^[A-Z]{2}$/,
                        regexText: 'Two letter country code (ISO 3166-1 alpha 2 standard) (eg:NO)!',
                        validateOnBlur: true // 显式开启失焦校验
                    });
                    return countryFieldBase;
                })()
            ]
        }
    ]
});

关键说明 #

1. Ext.applyIf的使用：我们先定义了Country字段的基础配置，再通过Ext.applyIf把正则规则、提示文本和失焦校验的配置合并进去——这样即使基础配置里以后新增了其他属性，也不会被覆盖，完全符合Ext.applyIf的设计初衷。
2. 失焦触发校验：validateOnBlur: true会让字段在用户移开焦点时自动执行校验逻辑，不符合规则的话会立刻弹出你设置的regexText提示。
3. 效果验证：当你在Country输入框输入非两位大写字母的内容（比如"China"或者"cn"），移开焦点后就会看到错误提示，输入"US"、"NO"这类符合规则的内容则不会有问题。

如果之后需要手动触发校验（比如按钮点击时），也可以通过组件查询获取到字段后调用validate()方法：

const countryField = Ext.ComponentQuery.query('textfield[name="country"]')[0];
const isValid = countryField.validate(); // 返回布尔值，同时显示错误提示

内容的提问来源于stack exchange，提问作者Jimson James