element 表单做校验

Element UI是一个流行的前端Vue.js组件库，它包含了一个强大的表单验证功能。在Element UI中，你可以使用`el-form`组件及其相关的验证规则来验证用户输入的数据。以下是基本的步骤：

1. **创建表单**：首先，你需要在HTML模板中引入`<el-form>`元素，并设置一个`model`属性绑定到数据模型，比如`this.form`。

<template>
  <el-form :model="form" ref="formRef">
    <!-- 表单字段 -->
  </el-form>
</template>

2. **添加验证规则**：`el-form-item`用于定义表单项，可以配合`prop`属性指定需要验证的字段，通过`rules`属性定义验证规则。例如，设置必填验证：

<el-form-item prop="username">
  <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  <el-form-item-error slot="append">用户名不能为空</el-form-item-error>
</el-form-item>

3. **自定义验证规则**：如果你需要更复杂的验证，比如正则表达式、长度限制等，可以在`rules`对象中提供函数或对象。例如：

form: {
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { pattern: /^.*(?=.{6,})(?=.*[A-Z])(?=.*\d).*$/, message: '密码强度不足', trigger: 'blur' }
  ]
}

4. **提交表单并处理错误**：当用户提交表单时，你可以监听`onSubmit`事件，并检查验证结果。如果存在错误，阻止默认提交并提示用户。

methods: {
  handleSubmit() {
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        // 提交数据
      } else {
        console.log('表单验证失败');
      }
    });
  }
}