vue element主动的去触发rules里的验证规则

vue element 中有时候需要对表单字段进行验证，除特定按钮外，还需要绑定其他的按钮也需要进行表单的验证

这时候就需要单独对表单进行主动验证，直接上代码

触发部分表单的验证

<el-form ref="form" :model="form" label-width="140px" :rules="rules"></el...>

data() {
  return {
    // 表单验证
    rules: {
      vehicleAttributes: [
        { required: true, message: '请选择员工类别', trigger: 'blur' }
      ],
      staffStatus: [
        { required: true, message: '请选择人员状态', trigger: ['blur', 'change'] }
      ]
    }
  }
}

写在你需要处理的方法之中

this.$refs['form'].validate('rules')

form为定义了ref的form表单

rules为data块定义的规则，如果只对表单中某一个项进行验证则使用下面的方法

this.$refs['form'].validateField('vehicleAttributes')

触发表单全局的验证

<el-button type="primary" @click="submit('form')">确 定</el-button>

// 触发全局的验证
submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证通过的逻辑
        } else {
          // 验证不通过
          console.log('error submit!!')
          return false
        }
      })
      console.log(this.staffNation)
    }

 

最后

以上就是贪玩高跟鞋为你收集整理的vue element主动的去触发rules里的验证规则的全部内容，希望文章能够帮你解决vue element主动的去触发rules里的验证规则所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。