Vue 3自定义组件表单验证失效问题求助

1. 修复自定义组件的模板语法错误 #

你的自定义组件模板里存在两处关键语法问题：

• class="form-control :required='required'" 语法错误，静态class和动态属性需分开声明，:required要单独作为属性绑定。
• input元素未绑定pattern属性，原生表单验证依赖该属性生效。

修正后的模板代码：

<template>
    <div class="form-group element">
        <input 
            type="text" 
            :name="name" 
            class="form-control" 
            :required="required"
            :pattern="pattern"
            placeholder=" "
        >
        <label :for="name" class="form-control-placeholder">
            {{ name }}:
        </label>
        <span class="error-msg">{{ errorMsg }}</span>
    </div>
</template>

2. 保留原生验证的样式控制逻辑 #

原生表单验证的错误提示显示/隐藏，依赖CSS通过:invalid伪类实现，你需要确保原有的样式逻辑正常生效。示例CSS：

.form-group .error-msg {
    display: none;
    color: red;
}
.form-group input:invalid:not(:placeholder-shown) ~ .error-msg {
    display: block;
}

（注意选择器要和你的DOM结构匹配，确保input处于无效且非占位符状态时，错误提示才会显示）

3. 修正组件调用时的props传递错误 #

调用组件时，字符串类型props无需额外包裹单引号，否则会导致属性值异常：

<CustomInput
    errorMsg="Please write at least 2 characters" 
    :required="true"
    name="name"
    pattern="[\w]{2,}"
/>

• errorMsg、name为字符串类型，直接传值即可，无需使用:绑定（仅当值为变量时需要）
• pattern中的转义字符在模板中直接写[\w]{2,}即可，无需额外转义

4. 组件脚本优化（可选） #

在<script setup>中，defineProps返回的props本身就是响应式的，无需通过toRefs解构，直接使用即可：

<script setup>
const props = defineProps({
    pattern: String,
    errorMsg: String,
    name: String,
    required: Boolean,
})
// 直接使用props.pattern、props.required即可
</script>

完成上述修改后，自定义组件就能正常继承原生表单的验证逻辑，输入满足条件时错误提示自动隐藏，不满足时自动显示。

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