关于elementUi和iview里表单验证插件的封装

关于elementUi和iview里表单验证插件的封装

众所周知,因为在elementUi和iview里表单验证插件用的是async-validator

有时候业务场景的验证规则比较复杂,于是简单封装一下方便 以后提高开发效率 免得老是重复去写

1. 新建validate.js 把业务场景需要用到的验证规则抽离出来

//小写字母
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

//大写字母
export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

//大小写字母
export function validateAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

//邮箱
export function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(email)
}

//手机号码
export function validateMobile (s) {
  return /^1[3456789]\d{9}$/.test(s)
}

//电话号码
export function validatePhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

//url地址
export function validateUrl (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

//身份证号
export function validatePersonId (s) {
  return /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(s)
}

2. 新建validateMain.js 单独写一个封装函数最后暴露出去

import * as Validates from './validate';

export const formValidate = (key, msg) => (rule, value, cb) => {
    if (Validates[key](value)) {
        cb()
    } else {
        cb(new Error(msg))
    }
}

3. 最后引入validateMain.js使用

import { formValidate } from '../../utils/validateMain'

rules: {
       name: [
         {
           required: true,
           trigger: 'blur',
           validator: formValidate('validateMobile', '请输入正确的手机格式')
         }
       ]
     },