简单聊聊如何使用element-UI组件库中Form的表单验证

怎么引入Element-UI，我就不说了，不知道的可以看一下我之前的文章(包括全部引入和按需引入)

最近做一个功能，需要用到element-ui的Form的校验功能。

做这个需要抓住这么几点：

 <el-form :model="user" :rules="rules" label-width="100px" ref="user">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password"></el-input>
          </el-form-item>
        </el-form>
 data() {
    return {
      user: { username: "", password: "" }
      }
      }

model

表单数据对象：与我们的data绑定，这样可以使我们的data与我们接下来的验证相连接，如果不加的话，你后边写什么验证规则都没用。

prop

表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。什么意思呢，就是我们后边写的rules需要这个属性。

  rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, message: "长度最少要3个字符", trigger: "blur" },
        ],
      },

ref

用于锁定form表单，后边我们写方法会用到，虽然官网没用说这个属性但是咱们学vue学过，用这个也比较简便。

button提交数据传参

 <el-button
          type="primary"
          size="default"
          class="footer-btn"
          @click="submit('user')"
          >提交</el-button
        >

传参和model一致，而且需要加引号哦！

validate

这是个事件名，任一表单项被校验后触发，传参结果是个根据你的表单出来的boolean值，如果通过就是true，不通过就是false。

这篇文章适合完全不了解，并且使用表单验证总是出错的朋友，快速上手。希望可以对你有帮助。