vueelement表单校验失败为什么

Question

校验没效果？？哪里写的不对？？

        <vab-query-form>
            <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
                <el-form-item v-if="queryForm.selectvalue==1" style="margin-left: -60px !important;" prop="title">
                    <el-input v-model="queryForm.title" placeholder="请输入用户昵称" />
                </el-form-item>
                <el-form-item v-if="queryForm.selectvalue==2" style="margin-left: -60px !important;" prop="phone">
                    <el-input v-model="queryForm.phone" placeholder="请输入手机号" />
                </el-form-item>
                <div id="">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">
                            查询
                        </el-button>
                        <el-button type="primary" @click="resetQuery">
                            重置
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </vab-query-form>

data() {
            var checkPhone = (rule, value, callback) => { // 手机号验证
                if (!value) {
                    return new Error("请输入电话号码");
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    const isPhone = reg.test(value);
                    value = Number(value); //转换为数字
                    if (typeof value === "number" && !isNaN(value)) { //判断是否为数字
                        value = value.toString(); //转换成字符串
                        if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
                            callback(new Error("手机号码格式如:138xxxx8754"));
                        } else {
                            callback();
                        }
                    } else {
                        callback(new Error("请输入电话号码"));
                    }
                }
            }
            return {
                              queryForm: {
                    time: '' ,//提现管理的时间筛选
                    phone:''
                },
                                Rules: {
                    phone: [{
                            required: true,
                            message: "请输入正确手机号",
                            trigger: "blur"
                        },
                        {
                            validator: checkPhone,
                            trigger: 'blur'
                        }
                    ]
                }, //表单校验


}

Answer 1

weixin_58412143 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

根据你提供的代码，我发现可能有几点导致表单校验没有生效的问题：

1. 缺少el-form-item的prop属性：校验规则需要和表单项绑定，需要给el-form-item添加prop属性，指定校验规则的字段名称。例如在v-if="queryForm.selectvalue==1"的el-form-item上添加prop="title"，v-if="queryForm.selectvalue==2"的el-form-item上添加prop="phone"。

2. 校验规则没有传递给el-form-item：需要将校验规则传递给el-form-item的rules属性。在el-form-item上添加:rules="Rules.phone"。

下面是修改后的代码示例：

<vab-query-form>
    <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item v-if="queryForm.selectvalue==1" style="margin-left: -60px !important;" prop="title" :rules="Rules.phone">
            <el-input v-model="queryForm.title" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item v-if="queryForm.selectvalue==2" style="margin-left: -60px !important;" prop="phone" :rules="Rules.phone">
            <el-input v-model="queryForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <div id="">
            <el-form-item>
                <el-button type="primary" @click="handleQuery">
                    查询
                </el-button>
                <el-button type="primary" @click="resetQuery">
                    重置
                </el-button>
            </el-form-item>
        </div>
    </el-form>
</vab-query-form>

另外，你在data中定义了一个checkPhone方法，但没有在组件中调用，如果需要校验手机号，可以直接在校验规则中使用trigger: 'blur'触发校验。所以可以将checkPhone方法从data中移除。

希望这些信息对你有帮助。如有需要，请随时追问。