如何在Salesforce标准记录编辑页实时捕获字段值并在LWC中校验告警

要在标准记录编辑页点击「保存」前实时捕获Amount字段值并完成校验，再通过自定义LWC组件展示告警，按以下步骤操作：

1. 编写LWC组件代码 #

组件核心实现三个功能：监听Amount字段变化、执行校验逻辑、拦截保存并展示告警。

JS控制器（amountValidation.js） #

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { registerListener, unregisterAllListeners } from 'lightning/messageService';
import RECORD_SAVE_MESSAGE_CHANNEL from '@salesforce/messageChannel/Record_Change__c';

export default class AmountValidation extends LightningElement {
    @api recordId;
    currentAmount;

    // 实时监听Amount字段值变化
    @wire(getRecord, { recordId: '$recordId', fields: [AMOUNT_FIELD] })
    wiredOpportunity({ data, error }) {
        if (data) {
            this.currentAmount = getFieldValue(data, AMOUNT_FIELD);
        } else if (error) {
            this.showToast('出错了', error.body.message, 'error');
        }
    }

    // 注册保存事件监听
    connectedCallback() {
        registerListener('recordSave', this.handleSave, this);
    }

    disconnectedCallback() {
        unregisterAllListeners(this);
    }

    // 处理保存请求并执行校验
    handleSave(event) {
        const isValid = this.checkAmount();
        if (!isValid) {
            event.preventDefault(); // 拦截保存操作
            this.showToast('校验不通过', 'Amount值不符合要求，请调整后重试', 'error');
        }
    }

    // 自定义校验逻辑（示例：Amount不能小于1000）
    checkAmount() {
        if (this.currentAmount && this.currentAmount < 1000) {
            return false;
        }
        return true;
    }

    // 展示告警提示
    showToast(title, message, variant) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant
        });
        this.dispatchEvent(event);
    }
}

HTML模板（amountValidation.html） #

<template>
    <!-- 若不想用系统默认提示框，可在此添加自定义样式的告警区域 -->
    <div if:true={showCustomAlert}>
        <div class="slds-notify slds-notify_alert slds-theme_error" role="alert">
            <span class="slds-assistive-text">错误</span>
            <h2>Amount值不符合要求！</h2>
        </div>
    </div>
</template>

元数据配置（amountValidation.js-meta.xml） #

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Opportunity</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

2. 创建消息通道（用于监听保存事件） #

在Setup中搜索「Message Channels」，新建名为Record_Change__c的消息通道，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>Record Change</masterLabel>
    <isExposed>true</isExposed>
    <description>用于监听记录保存事件</description>
    <lightningMessageFields>
        <fieldName>recordId</fieldName>
        <description>记录ID</description>
    </lightningMessageFields>
</LightningMessageChannel>

3. 将组件部署到标准页面布局 #

1. 打开任意商机记录，点击右上角「设置」→「编辑页面」
2. 在组件列表中找到自定义的amountValidation组件，拖拽到页面合适区域（如侧边栏或页脚）
3. 保存并激活该页面布局

额外说明 #

• 若需更精准监听字段输入变化，可结合lightning-input-field的onchange事件，但在标准页面中，wire(getRecord)已能实现字段值实时同步
• 校验逻辑可根据业务需求修改，比如判断金额上限、关联其他字段校验等
• 告警既可以用系统自带的提示框，也可以自定义HTML样式的告警区域

内容的提问来源于stack exchange，提问作者P.M. Sathiyamoorthy