用法

1.template部分

rules为校验规则

<template>
  <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" style="width: 200px" />
    </el-form-item>
    <el-form-item label="价格" prop="price">
      <el-input v-model="form.price" style="width: 200px" />
    </el-form-item>
  </el-form>
</template>

注意:el-form-item标签里的prop不能丢，否则无法校验。

2.script部分

校验规则定义

const rules = reactive({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
});

发起请求之前的校验

await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
        //校验成功，可以调用后端接口发送请求
    } else {
        //校验失败，触发rules里的message
    }
}

原码解读

===有空再写===