简单封装Element-UI表单验证

我相信大家在使用element-ui框架的时候都避免不了使用它的表单组件，其中表单验证的使用频率颇高。由于自己工作的原因会使用到很多表单，而且都需要验证，而本人人又特别懒不想写那些重复代码，就连c、v键都不想使用。于是我对element-ui的表单验证进行了一定的封装。

首先来看一下目录结构

• reg-exp-maven.js 存放正则表达式
• validate.js 写通用的校验方法
• validate-form.js 封装针对element表单的校验

正则表达式

（reg-exp-maven.js）目前正则表达式我就写了关于电话、邮箱、过滤特殊字符串的表达式，其余的大家可以随意扩展

/* eslint-disable */

export default {
     
  tel: /^(13[0-9]|14[5|7|9]|15[0|1|2|3|5|6|7|8|9]|16[6]|17[0|1|2|3|5|6|7|8]|18[0-9]|19[8|9])\d{8}$/,
  email: /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/,
  specialStr: /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im
}

通用校验方法

(validate.js)其实就是使用正则表达式，这里面的方法什么项目都是可以用的。

/* 表单验证 */
import REGEXP_MAVEN from './reg-exp-maven'

// 去除首尾空格
export const clearStartAndEndEmpty = (str) => {
     
  return str ? str.trim() : str
}
// 去除字符串中全部空格
export const clearEmpty = (str) => {
     
  return str ? str.replace(/\s+/g, '') : ''
}

// 检测特殊字符
export const checkSpecialStr = (str) => {
     
  return REGEXP_MAVEN.specialStr.test(str)
}
// 邮件检测
export const checkEmail = (email) => {
     
  return REGEXP_MAVEN.email.test(email)
}
// 电话检测
export const checkTel = (tel) => {
     
  return REGEXP_MAVEN.tel.test(tel)
}

Element-UI表单校验

/* 表单验证 */
import {
     
  checkTel,
  checkEmail,
  clearEmpty
} from './validate'

// 验证输入框
export const validateElInput = (key, trigger = 'click', message = '') => {
     
  let rs = {
     }
  if (typeof key === 'string') {
     
    rs = {
     
      [key]: [
        {
      required: true, message, trigger }
      ]
    }
  }
  if (key.constructor === Array) {
     
    for (let item of key) {
     
      rs[item] = [{
      required: true, message, trigger }]
    }
  }
  return rs
}

// 邮件检测
export const validateEmail = (rule, value, callback) => {
     
  if (!clearEmpty(value)) {
     
    callback(new Error('请填写邮箱'))
    return
  }
  if (!checkEmail(value)) {
     
    callback(new Error('邮箱格式不正确'))
    return
  }
  callback()
}
// 电话检测
export const validateTel = (rule, value, callback) => {
     
  if (!clearEmpty(value)) {
     
    callback(new Error('请填写电话'))
    return
  }
  if (!checkTel(value)) {
     
    callback(new Error('电话格式不正确'))
    return
  }
  callback()
}

// 规则
const rules = {
     
  email: [{
      validator: validateEmail, trigger: 'blur' }],
  tel: [{
      validator: validateTel, trigger: 'blur' }]
}

/**
 * 根据传递的字符串配置输出element-ui表单自定义格式校验规则
 * @param configStr 配置名称英文逗号(,)隔开
 * @param trigger 触发方式，在rules中默认为trigger
 */
export const createRules = (configStr, trigger) => {
     
  let configArr = []
  let rulesResult = {
     }
  if (configStr && clearEmpty(configStr)) {
     
    configArr = configStr.split(',')
    configArr.forEach(value => {
     
      if (rules.hasOwnProperty(value)) {
     
        if (trigger) {
     
          rules[value].trigger = trigger
        }
        rulesResult[value] = rules[value]
      }
    })
  }
  return rulesResult
}

export default createRules

验证输入框主要是解决那些必填的但是不需要格式校验的，就可以直接使用了，可以直接传递key值，也可以传递key的数组。

使用

首先我们来看一下简单的input必填验证

<el-form
  v-if="company"
  ref="edit-company"
  :model="company"
  :rules="rules"
  ...
</el-form>

<script>
import {
      validateElInput } from '@/utils/validate-form'
export default {
     
  ...
  data() {
     
    return {
     
      company: {
     
        name: ''
      }
    }
  },
  computed: {
     
   rules() {
     
	return validateElInput(Object.keys(this.form))
   }
 }
  ...
}
</script>

再来看一下自定义验证规则

<el-form
  v-if="company"
  ref="edit-company"
  :model="company"
  :rules="rules"
  ...
</el-form>

<script>
import createRules from '@/utils/validate/validate-form'
export default {
     
  ...
  data() {
     
    let rules = createRules('email,tel')
    return {
     
      rules,
      company: {
     
        name: '',
        tel: '',
        email: ''
      }
    }
  }
  ...
}
</script>

又可以偷懒了～