vue 验证表单格式rule和清空表单resetfields
一、前端界面
有一个对话框，内有2个输入框testappname和testdescription，以及2个按钮cancel和submit
二、增加表单格式校验规则rule
给这2个输入框都加入非空校验
注意：el-form-item上设置prop字段，表单rule验证和resetfields() 清理的都是prop绑定的字段
三、清空表单resetfields
form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致
Vue处理表单校验
1、vue使用element-ui的form表单验证
问题描述：***次点击新增时正常，第二次新增打开弹窗后由于表单内容为空，出现验证这种情况。
解决 ： this.$refs.staffForm.resetFields();//等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields()，去除验证（clearValidate），（resetField表单重置）
//打开弹窗的新增方法
addStaff() {
this.staffVisible = true;//弹窗打开
this.$nextTick(()={
this.$refs.staffForm.resetFields()
this.$refs.staffForm.clearValidate()
});
},
vue+el-form表单验证、提交及重置
不满足以下条件可能就出现验证不走心的状态~~~
正确实例：
童鞋们~ 你们一定也遇到过对象中的对象无法验证的情况吧
举个栗子~~
有两种方法，如下：
2.没有使用el-form表单的重置
this.$options.data()是vue实例初始化时的data数据，只读属性
el-date-picker
不允许选当前之前日期
监听计算属性
（计算属性+el-form进行表单验证）= 利用value给v-model赋值
解决方法二、
$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了
vue表单验证组件 v-verify-plugin
版本已更新至2.0 说明
github:
npm:
验证之后的错误存储在 vm.$verify.$errors 中，可自行打印出
vm.$verify.$errorArr*** 存储上一次验证的错误
配置传入一个对象
在表单控件元素上创建数据的验证规则，他会自动匹配要验证的值以及验证的规则。
该指令最后一个修饰符为自定义分组
如果同时使用修饰符和arg分组 则arg会覆盖修饰符分组
v-verified 错误展示，当有错误时会展示，没有错误时会加上style:none,默认会展示该数据所有错误的***条
该指令为语法糖(见示例)
关于vue表单验证和vue表单验证并发送请求的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。