vue+element 编写一个共用的表单校验

可以使用 element-ui 提供的表单校验规则来编写共用的表单校验。具体步骤如下：

1. 在组件中引入 element-ui 的表单校验规则：

import { validatePhone, validateEmail } from 'element-ui/src/utils/validate'

2. 定义共用的表单校验规则：

const validateForm = {
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { validator: validatePhone, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { validator: validateEmail, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

3. 在表单中使用共用的表单校验规则：

<el-form ref="form" :model="form" :rules="validateForm">
  <el-form-item label="手机号码" prop="phone">
    <el-input v-model="form.phone"></el-input>
  </el-form-item>
  <el-form-item label="邮箱地址" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
</el-form>

这样就可以实现共用的表单校验了。