如何在服务器响应后显示表单错误信息？（Vue+WordPress）

核心问题排查 #

当前代码存在3个关键错误：

1. 模板中错误引用数据属性（直接用invalidPhone/invalidEmail，实际这些属性存在于store对象下）
2. 邮箱验证请求传参错误（用this.email而非绑定的this.store.email）
3. 表单控件的is-valid/is-invalid类绑定逻辑不严谨（仅判断字段是否有值，未结合验证结果）

分步修复代码 #

1. 修正HTML模板中的数据引用与类绑定

<!-- telefono -->
<div class="col-sm-12 col-md-6 col-lg-6">
    <label class="mt-3 mb-1">Telefono</label>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="+39" v-model.lazy="store.prefisso" id="phonePrefix">
        <!-- 修正类绑定逻辑：仅当字段有值且验证通过时加is-valid；为空或验证失败时加is-invalid -->
        <input type="text" class="form-control" 
               :class="{
                   'is-invalid': (!store.telefono || store.invalidPhone) && (store.telefono || store.invalidPhone),
                   'is-valid': store.telefono && !store.invalidPhone
               }" 
               placeholder="3212345678" 
               v-model.lazy="store.telefono" 
               @change="checkPhoneNumber" 
               @blur="checkFormFields" 
               id="phoneNumber">
    </div>
    <div class="invalid-feedback">
        <!-- 修正数据引用：使用store.invalidPhone，且错误提示逻辑拆分 -->
        <small v-if="!store.telefono">Required field</small>
        <small v-else-if="store.invalidPhone">Insert a valid phone number</small>
    </div>
</div>
<!-- email -->
<div class="col-sm-12 col-md-6 col-lg-6">
    <label class="mt-3 mb-1">Email</label>
    <!-- 修正类绑定逻辑 -->
    <input type="email" class="form-control" 
           :class="{
               'is-invalid': (!store.email || store.invalidEmail) && (store.email || store.invalidEmail),
               'is-valid': store.email && !store.invalidEmail
           }" 
           placeholder="Email" 
           v-model.lazy="store.email" 
           @blur="checkFormFields" 
           @change="checkEmail">
    <div class="invalid-feedback">
        <!-- 修正数据引用：使用store.invalidEmail -->
        <small v-if="!store.email">Required field</small>
        <small v-else-if="store.invalidEmail">Insert a valid email address</small>
    </div>
</div>

2. 修正JavaScript验证方法中的传参错误

checkPhoneNumber(){
    const res = phoneValidator(`${this.store.prefisso}${this.store.telefono}`)
    this.store.invalidPhone = !res.isValid()
},
checkEmail(){
    // 修正传参：使用store中的email值
    axios.post(`${wp_params.resturl}validate-email`, {
        email: this.store.email
    },{
        headers: {
            'X-WP-Nonce': wp_params.nonce
        }
    }).then( (res) => {
        const { valid_format, disposable_email_provider, valid_mx_records } = res.data
        // 简化赋值逻辑
        this.store.invalidEmail = !(valid_format && !disposable_email_provider && valid_mx_records)
    }).catch( e => console.log(e) )
}

修复逻辑说明 #

• 数据引用修正：所有invalidPhone/invalidEmail必须指向store对象下的属性，确保模板与数据来源一致
• 类绑定优化：
  • is-invalid仅在「字段为空（必填校验失败）」或「字段有值但格式/规则校验失败」时添加，避免初始状态下误显示
  • is-valid仅在「字段有值且所有校验通过」时添加
• 错误提示拆分：通过v-if/v-else-if明确区分「必填提示」和「格式错误提示」，避免逻辑冲突
• 传参修正：确保邮箱验证请求发送的是用户实际输入的store.email值，后端才能返回正确的验证结果

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