LWC输入字段必填功能求助：点击搜索时校验空值并显示红色错误提示

要实现点击「Search」按钮时校验输入框非空并显示红色错误提示，你可以按以下步骤修改代码：

1. 更新HTML模板 #

添加SLDS表单元素样式、错误状态绑定和错误提示文本：

<template>
    <div class="slds-grid">
        <div class="slds-col">
            <!-- 用slds-form-element包裹，动态添加错误样式 -->
            <div class="slds-form-element {isError ? 'slds-has-error' : ''}">
                <div class="slds-form-element__control">
                    <input 
                        type="text" 
                        placeholder="Enter id here" 
                        value={inputId} 
                        onchange={onchangeIdhandler}    
                        class="slds-input" 
                    />
                </div>
                <!-- 错误提示，仅当isError为true时显示 -->
                <template if:true={isError}>
                    <div class="slds-form-element__help" style="color: #c23934;">{errorMessage}</div>
                </template>
            </div>
        </div>
        <div class="slds-col slds-p-horizontal_large">
            <button class="bg slds-button slds-align_absolute-center" onclick={handleSearch}>Search</button>
        </div>
    </div>
</template>

2. 编写JavaScript逻辑 #

在组件的JS文件中添加错误状态管理和校验逻辑：

import { LightningElement, track } from 'lwc';

export default class YourComponentName extends LightningElement {
    @track inputId = '';
    @track isError = false;
    @track errorMessage = '';

    onchangeIdhandler(event) {
        this.inputId = event.target.value;
        // 用户输入时清除错误状态
        if (this.isError) {
            this.isError = false;
            this.errorMessage = '';
        }
    }

    handleSearch() {
        // 校验输入是否为空（去除首尾空格）
        if (!this.inputId.trim()) {
            this.isError = true;
            this.errorMessage = '请输入搜索ID';
            return; // 阻止后续搜索逻辑执行
        }

        // 输入合法，执行搜索逻辑
        this.isError = false;
        console.log('执行搜索，ID为:', this.inputId);
        // 这里添加你的搜索业务代码
    }
}

关键说明： #

• 使用isError布尔属性控制错误样式和提示文本的显示/隐藏
• 利用SLDS的slds-has-error类给输入框添加红色边框的错误样式
• 错误提示文本使用slds-form-element__help类并设置红色字体，符合Salesforce设计规范
• 用户输入时自动清除错误状态，提升交互体验

内容的提问来源于stack exchange，提问作者Girbson BIJOU