Skip to content

devElValidateForm 触发ElForm表单校验

用于特殊情况下form表单校验不会自动触发时使用。

常见的场景有:我们封装了一个组件,会双向绑定值,当我们放到el-form表单中后最开始做了校验,提示必填项之后,当组件绑定上值后,提示警告依然存在。这个时候就可以用 devElValidateForm 来解决。

devElValidateForm() 支持传递两个参数 change blur分别代表

  • change 数据发生改变时触发
  • blur 光标离焦时触发

需注意要传递的参数要和 rules 中的 trigger 对应。

typescript
const rules = ref({
    imageUrl: [
        { required: true, message: '请上传图片', trigger: 'change' },
    ]
})

使用示例

vue
<script setup lang="ts">
  import { initDevElValidateForm, devElValidateForm} from "devecoui-plus";
  
  // 首先初始化一下方法
  initDevElValidateForm();
  
  const emit = defineEmits(['update:modelValue']);
  
  // 比如我们这个方法会更新v-model
  const change = (val:string)=>{
      emit('update:modelValue',val);
      
    // 更新数据后再使用 devElValidateForm 来提示el-form组件重新校验
    devElValidateForm('change');
  }
  
</script>