vue 验证表单格式rule和清空表单resetfields
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 验证表单格式rule和清空表单resetfields相关的知识，希望对你有一定的参考价值。
参考技术A 一、前端界面有一个对话框，内有2个输入框testappname和testdescription，以及2个按钮cancel和submit
二、增加表单格式校验规则rule
给这2个输入框都加入非空校验
注意：el-form-item上设置prop字段，表单rule验证和resetfields() 清理的都是prop绑定的字段
三、清空表单resetfields
form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致
关于element在vue中的使用--form表单清空验证
情景：在弹框中使用element表单。
问题：表单先回显后表单不清空
描述及原因：在初次打开弹框新增表单内容时，表单验证方法resetFields()是可以使用的，但是在如果页面是先回显数据时，如果使用该方法，表单就不会清空，后来观察了一下，是这个方法虽然不能清空，但是再修改后会重置到最初赋值状态，百度了一下，发现数据绑定在dom上是发生在mounted中的，而我们在定义数据时是发生在created时绑定的数据，所以重置时会重置到赋值的阶段。
解决方法：
1>this.$nextTick()将赋值操作放到dom渲染结束之后
2>我们需要清空表单时，调用初始化方法，这个方法用来初始需要赋值为空的表单。
显然第一种方法比较简便
参考链接：https://www.jianshu.com/p/21904d061007
以上是关于vue 验证表单格式rule和清空表单resetfields的主要内容，如果未能解决你的问题，请参考以下文章