欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

el-form表单添加自定义验证

程序员文章站 2022-04-25 15:47:46
...

添加表单el-form

必不可少的字段: :model、ref、:rules 还有表单项里的prop

最后添加一个确定按钮和一个取消按钮,取消按钮的cancel功能是点击取消按钮及时清除验证信息 

el-form表单添加自定义验证

在data() {}里面添加验证 规则

el-form表单添加自定义验证 

 在data的return里面引用验证规则

el-form表单添加自定义验证 

 在确定按钮里面使用验证

saveAdd: function() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
            alert('valid)
        } else {
            alert('disvalid')
        }
      })
}

在取消按钮添加代码清除提示信息

cancel: function(formName) {
      this.$refs[formName].clearValidate()
    }