element表单校验

对于element-ui的表单校验，你可以通过以下步骤来实现：

1. 在表单中使用`<el-form>`标签包裹需要校验的表单元素。

2. 为每个需要校验的表单元素添加`prop`属性，该属性的值用于标识该表单元素。

3. 使用`rules`属性为每个表单元素定义校验规则，`rules`是一个数组，每个元素代表一个校验规则对象。

4. 在校验规则对象中，可以使用不同的校验方法，如`required`、`min`、`max`、`pattern`等。

5. 可以通过`message`属性为校验规则定义错误提示信息。

下面是一个简单的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.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 {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行提交操作
          console.log('表单校验通过');
        } else {
          // 表单校验不通过，给出错误提示
          console.log('表单校验不通过');
        }
      });
    }
  }
};
</script>

在上述示例中，`form`对象是表单数据的模型，`rules`对象定义了表单元素的校验规则。`submitForm`方法用于提交表单，其中通过`this.$refs.form.validate`方法来触发表单的校验，并在回调函数中处理校验结果。