ElementUI表单校验总结

blueju
2,742 阅读3分钟

需要注意的地方：

  • 必须同时拥有 rules 和 prop 两个属性
  • rules 属性，既可以在 el-form 标签，也可以在 el-form-item 标签
  • prop 属性只能在 el-form-item 标签

对应关系

不知道你是否疑惑过，ElementUI表单中的 prop、rules对象中的校验属性、 v-model绑定的值，三者之间是什么对应关系。

将 rules 写在 el-form-item 中

一直以来，我都以为 rules、prop、v-model 三者的值必须一致方可，如下代码中的 form.username。

<template>
  <div class="two">
    <el-form :model="form">
      <el-form-item label="用户名" prop="username" :rules="rules.username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "two",
  data() {
    return {
      form: {
        username: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      }
    };
  }
};
</script>


但我们调整一下，将 prop 的 username 和 v-model 的 username 改为 user，刷新后页面未报错，校验依旧可行有效。

<template>
  <div class="two">
    <el-form :model="form">
      <el-form-item label="用户名" prop="user" :rules="rules.username">
        <el-input v-model="form.user"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "two",
  data() {
    return {
      form: {
        user: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      }
    };
  }
};
</script>

如果你仔细看了以上代码，你会发现我代码中的 rules 属性是写在 el-form-item 中，且详细描述了 它所在的 el-form-item 应该使用 rules 对象中的 username 这条校验规则。

将 rules 写在 el-form 中

但如果我们将 rules 写在 el-form 标签中会怎么样呢？

<template>
  <div class="one">
    <el-form :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "one",
  data() {
    return {
      form: {
        username: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      }
    };
  }
};
</script>

rules 写在 el-form 中，表示这个 el-form 使用 rules 这个校验规则组成的对象，但仅仅如此的话，怎么知道 el-form-item 应该具体使用哪条校验规则呢，我认为就是 prop。

在 rules 写在 el-form 标签的情况下，prop 的作用一是联系 rules 和 el-form-item，表示该 el-form-item 使用 rules[prop的值] 这条校验规则；二是联系 el-form-item 和 v-model，表示 form[prop的值] 需要被校验。

小小总结

我认为可以得出以下对应关系结论：
当 rules 写在 el-form-item 中时，
prop、rules、v-model三者可以不一致，我们只需要注意保持，prop 和 v-model 一致即可，因为 rules 已经表示了该 el-form-item 应该应用什么校验规则了。
当 rules 写在 el-form中时，
prop、rules、v-model三者则必须保持一致，因为 rules 是写在 el-form 上的，无法知道各个 el-form-item 应该使用 rules 中的哪条校验规则，因此我们需要用 prop 来进行关联绑定。

为了方便，我们无论哪种情况，都尽量保持三者一致，就好了。

复杂表单校验需求DEMO

⭐

需求：
表单需要展示N个产品参数，展示形式暂时为输入框，输入框的值来源于请求响应数据，可编辑，并且最后该表单需要校验并提交。

Github：
github.com/blueju/Blog…

avatar
文章
阅读
粉丝