Vue中使用Element-UI表单验证相关问题及解决

项目中表单填写提交前需要进行验证,记录一下踩坑的几个地方

目录

• rules验证和自带验证

rules验证和自带验证

在data中用rules自定义了验证信息,注意,prop的值应该与v-model的值和rules中的值一样,否则无法触发rules验证。

例子如下：

<el-form-item label="分布区间" prop="scale">
    <el-input v-model="form.scale" placeholder="请输入分布区间"></el-input>
</el-form-item>

                rules: {
                    scale: [
                        {required: true, message: '请输入分布区间', trigger: 'blur'}
                    ],
                }

在实际使用中,当el-form-item标签与rules中同时拥有required属性时(即<el-form-item label="分布区间" prop="scale" required>)

表单会先进行自带验证,再进行rules验证

这个自带验证显示的是async-validator验证的内容,打开控制台即可看到

例子是这样的：

控制台

页面显示

如果想只触发rules验证,el-form-item标签中不可填写required属性

只触发rules验证