el-form表单校验规则

el-form 表单组件可以使用 `rules` 属性来添加校验规则，具体步骤如下：

1. 在表单控件上添加 `prop` 属性，该属性的值对应表单数据对象中的属性。
2. 在 el-form 上添加 `rules` 属性，该属性的值是一个对象，对象的 key 是对应表单控件的 prop 值，value 是一个数组，数组中包含校验规则。
3. 在表单控件上添加 `v-model` 属性，该属性的值对应表单数据对象中的属性。

例如，在一个登录表单中，需要对用户名和密码进行校验，可以这样写：

<template>
  <el-form :model="loginForm" :rules="loginRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 表单校验通过，可以提交表单
          console.log(this.loginForm);
        } else {
          // 表单校验未通过，不可以提交表单
          return false;
        }
      });
    },
  },
};
</script>

在这个例子中，我们使用了两个 el-form-item 组件来包含用户名和密码的输入框，分别对应 loginForm 对象的 username 和 password 属性。在 el-form 上设置了 loginRules 对象来指定校验规则，其中 username 和 password 分别指定了两个校验规则。在 submitForm 方法中，我们使用了 `$refs` 来获取表单组件，并调用了 validate 方法来进行表单校验。`validate` 方法的回调函数中，如果校验通过，则会返回 `true`，否则会返回 `false`。