element ui 表单校验2次

Element UI 表单校验可以通过内置的校验规则和自定义规则来实现。以下是基本的两种表单校验：

1. 内置校验规则

Element UI 提供了一些内置的校验规则，可以直接在表单项上使用。例如：

<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-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
</el-form>

在上面的代码中，`prop` 属性指定了表单项对应的数据字段名，`rules` 属性指定了校验规则。在 `rules` 中，可以使用内置的校验规则，例如：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

在上面的代码中，`required` 表示必填项，`min` 和 `max` 表示最小和最大长度。`trigger` 属性指定了触发校验的事件，例如 `blur` 表示失去焦点时校验，`change` 表示值变化时校验。

2. 自定义规则

除了内置的校验规则，还可以通过自定义规则来实现表单校验。例如，如果要验证两次输入的密码是否一致，可以使用以下代码：

rules: {
  password2: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.checkPassword2, trigger: 'blur' }
  ]
},
methods: {
  checkPassword2(rule, value, callback) {
    if (value !== this.form.password) {
      callback(new Error('两次输入的密码不一致'));
    } else {
      callback();
    }
  }
}

在上面的代码中，`validator` 属性指定了自定义校验函数，该函数接收三个参数：校验规则对象、当前表单项的值、回调函数。如果校验不通过，回调函数应该传递一个 Error 对象，其中包含错误消息。如果校验通过，则直接调用回调函数即可。

以上是 Element UI 表单校验的基本用法，可以根据实际需求进行扩展。