Vue处理表单校验

JavaScript012

Vue处理表单校验,第1张

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()

      })

},

第一步，创建静态页面validation.html，并引入vue.js相关的js文件，如下图所示：

第二步，在页面主体中插入form表单元素，有用户名、密码、提交按钮，如下图所示：

第三步，作为vue.js校验，利用到vue-validator插件，需要引入vue-validator相关的js文件，如下图所示：

第四步，预览静态页面，可以看到页面展示内容为：用户名、密码、提交按钮，如下图所示：

第五步，调用vue方法

new Vue({ el:'#validForm'})

如下图所示：

第六步，再次预览静态页面，查看页面显示内容，并输入内容，如下图所示：

版本已更新至2.0 说明

github: https://github.com/liuyinglong/verify

npm: https://www.npmjs.com/package/vue-verify-plugin

验证之后的错误存储在 vm.$verify.$errors 中，可自行打印出

vm.$verify.$errorArray 存储上一次验证的错误

配置传入一个对象

在表单控件元素上创建数据的验证规则，他会自动匹配要验证的值以及验证的规则。

该指令最后一个修饰符为自定义分组

如果同时使用修饰符和arg分组 则arg会覆盖修饰符分组

v-verified 错误展示，当有错误时会展示，没有错误时会加上style:none,默认会展示该数据所有错误的第一条

该指令为语法糖(见示例)