element 的校验规则如何配置通用

element 的校验规则可以通过以下方式进行通用配置：

1. 在 main.js 中全局引入 ElementUI，并配置校验规则：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { Validator } from 'vee-validate' // 引入验证插件

Vue.use(ElementUI)

// 配置全局的校验规则
Validator.extend('phone', {
  getMessage: field => field + '格式不正确',
  validate: value => /^1[3456789]\d{9}$/.test(value)
})

上述代码中，使用了 vee-validate 这个验证插件，并且通过 Validator.extend 方法扩展了一个名为 phone 的校验规则。该校验规则用于验证手机号码格式是否正确，如果不正确则会提示“手机号码格式不正确”。

2. 在需要使用校验规则的组件中，引入 vee-validate 以及 ElementUI：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { Validator } from 'vee-validate' // 引入验证插件
import { mapState } from 'vuex'

export default {
  data () {
    return {
      form: {
        phone: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { phone: true, message: '手机号码格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 配置全局的校验规则
    Validator.extend('phone', {
      getMessage: field => field + '格式不正确',
      validate: value => /^1[3456789]\d{9}$/.test(value)
    })
  }
}
</script>

<style>
</style>

上述代码中，引入了 Validator 并且在 created 钩子函数中扩展了一个名为 phone 的校验规则。在 form 表单中，通过 :rules 属性传入了一个名为 rules 的对象，用于配置各个表单项的校验规则。其中，phone 表单项的校验规则包括了两条：必填项和手机号码格式的校验规则。

通过以上方式，可以实现 ElementUI 校验规则的通用配置，从而避免在多个组件中重复定义校验规则的问题。