element plus 表单验证的字段名解释以及使用方法

// 页面结构
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="add_user"
          label-width="70px"
          label-position="left"
        >
        <el-form-item class="add_From" label="分类名" prop="rolesDetail">
          <el-input class="add_input" v-model="ruleForm.rolesDetail" />
        </el-form-item>
      <el-form-item class="ensure">
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交</el-button
      >
       <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
// 数据源
const ruleForm = reactive({
  rolesDetail: null
})
// 校验规则
const rules = reactive<FormRules>({
  rolesDetail = [
  { required: true, message: '请输入信息', trigger: 'blur' },
  { min: 2, max: 8, message: '字符长度为2-10位', trigger: 'blur' }
]
})
// 注意 检验规则需要和数据源同名，否则会出现获取不到数据一直校验失败的情况