vue 的el-input共通的验证怎么写

Vue 的 el-input 组件可以通过使用自定义验证函数来进行通用的验证。

下面是一个例子，展示了如何在 el-input 组件中添加一个验证函数，以确保用户输入的值是一个有效的电子邮件地址：

<template>
  <div>
    <el-input v-model="email" placeholder="请输入邮箱" :validate-event="false" :rules="emailRules"></el-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        email: '',
        emailRules: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
        ],
      };
    },
  };
</script>

在上面的例子中，我们定义了一个 `emailRules` 数组，其中包含两个验证规则:

- `{ required: true, message: '请输入邮箱地址', trigger: 'blur' }` 表示该字段不能为空。
- `{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }` 表示该字段必须是一个有效的电子邮件地址。`trigger` 属性指定了触发验证的事件，可以是 `blur`、`change` 或两者都包括。

将 `emailRules` 数组绑定到 el-input 组件的 `rules` 属性上，即可实现通用的验证。同时，我们将 `validate-event` 属性设置为 false，以防止在用户输入时触发验证。