element-ui中form验证的细节和杂项如何全面掌握和深入理解？

本文共计885个文字，预计阅读时间需要4分钟。

最近接触的商家后台项目涉及大量表单验证，自然也包含大量单据验证。同时，对一些常用el-form表单验证和问题进行梳理。

添加required验证后，输入数据后再删除，会提示必填项不能为空。

最近接触的商户后台项目居多，自然而然就涉及到了大量的表单验证，

也就对一些常用的el-form表单验证和问题进行下梳理。

当我们添加required验证后，输入一些数据后再删除完时，会出现xxx is required，如下图所示

你可能很纳闷，已经为form表单传入了rules了啊，在不全部删除时，验证规则都没问题。这个问题是因为在html中使用了required字段，而在rules的规则没有设置required为true，

// html <el-form-item label="角色名称" required prop="roleName"> <el-input v-model="params.roleName"></el-input> </el-form-item> // js { trigger: 'blur', message: '角色名称为必填项' }

这种情况下就会为输入框添加一条默认验证规则，就导致了上面图片情况的发生。

为了解决这种情况，我们只需要把卸载html里的required去除，并把他移动到rules的规则之中即可。