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

最新推荐文章于 2022-02-18 18:35:06 发布

好想掉进那故事里

最新推荐文章于 2022-02-18 18:35:06 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/weixin_42837731/article/details/107930091

版权

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

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

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

新建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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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)
}

新建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))
    }
}

最后引入validateMain.js使用

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

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