---

前言

我的思路是正确的…用计算属性将校验规则返回, 按照我的记忆.
但是刚开始就是不行, 即便返回完全一样的东西让prop属性完全相同, 校验并不生效, 我觉得应该是会对校验规则对象进行一个检验, 只会使用绑定在表单上的校验规则对象上的校验规则.

但是我就没想到, 我就不能直接把整个rules校验对象都放computed里吗? 我怎么就非要一条一条的放然后分别返回呢…

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、改动前

实测model和ref不需要相同, 我今天看到有人说要相同才行.

<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col>
          <el-form-item label="活动形式" prop="region1">
            <el-input v-model="ruleForm.region1">el-input>
          el-form-item>
        el-col>
        <el-col>
          <el-form-item label="需要餐具" prop="region2">
            <el-radio-group v-model="ruleForm.region2">
              <el-radio label="线上品牌商赞助">el-radio>
              <el-radio label="线下场地免费">el-radio>
            el-radio-group>
          el-form-item>
        el-col>
        <el-col>
          <el-form-item prop="button">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >submitel-button
            >
          el-form-item>
        el-col>
      el-row>
    el-form>
    xingshi: {{ rules.xingshi }}<br />
    rules.checkbox: {{ rules.checkbox }}
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

export default {
  name: "FormPra",
  data() {
    return {
      ruleForm: {
        region1: "",
        region2: "",
      },
      rules: {
        region1: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region2: [
          //{ required: true, validator: this.checkEmail(), trigger: "change" },
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

二、将校验规则放到computed

要点就是把整个rule校验规则对象放进去返回, 而不是一个一个的用校验项函数返回校验数组:

export default {
  name: "FormPra",
  data() {
    return {
      ruleForm: {
        region1: "",
        region2: "",
      },
    };
  },
  computed: {
    rules() {
      //可能必须要一个函数返回一个完整的rules, 单单返回校验规则是不行的;
      let rules = {
        region1: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region2: [
          //{ required: true, validator: this.checkEmail(), trigger: "change" },
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      };
      return rules;
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---

总结

前天刚看见过, 我记得挺简单的, 今天突然想不起来了.
哎, 现在业务不熟练, 多记一下项目里的要点.