如何封装一个带表单验证的 Vue的表单插件（三）：优化和拓展

最新推荐文章于 2025-07-04 20:59:02 发布

WangYangsea

最新推荐文章于 2025-07-04 20:59:02 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue组件封装 Vue表单验证 Vue validate Vue表单插件表单验证插件

本文链接：https://blog.youkuaiyun.com/WangYangsea/article/details/94897533

上一篇我们已经完善了主要的验证功能~包括单独验证、不通触发方式、全部交验，但是我只用了输入框组件，但是

表单组件当中除了输入框，还有多行输入textarea(这个和input.vue基本一样，这边不再次写了)。单选(radio)、多选(CheckBox)、下拉选择(select)这些个常用标签，其中还是有一些细微差别，我们还要拿出来简单说一下；
此外我们上篇的文章中只是使用的基本的必填验证和 async-validator自带的验证规则。本章节会完善自定义验证规则~

废话不多说，开始我们的代码~~

自定义校验

我们在src下新建一个目录utils，放工具JS：
在这里插入图片描述
其中

assist.js 是第一篇文章说道的工具函数 findComponentUpward(向上查找最近的最近的指定组件) 、findComponentsDownward(向下查找所有指定的组件 )。
constant.js放的是一些常量，使用全大写定义，可以更好管理常量，并且在书写的时候更容易通过编译器只能识别错写的问题。
validateRules.js 就是表单验证rules的JS文件，里面包括了一些内部处理函数和方法。向外暴露(export) 对应的form表单的rule规则

让我们来详细看一下validateRules.js ：

import * as constant from './constant'

/**
 * 去除前后空格
 * @param {*} val 字符串
 */
function trim (val) {
  return val.replace(/(^\s*)|(\s*$)/g, '')
}
/**
 * 字符串长度范围验证
 * @param {*} min 最少位数 默认0
 * @param {*} max 最多位数 默认10000
 */
function lengthLimit (min = 0, max = 1000000) {
  if (arguments.length === 0) {
    return
  }
  const isNumber = [...arguments].every(item => typeof item === 'number')
  if (!isNumber) {
    throw new Error('lengthLimit函数参数必须为Number')
  }
  const message = arguments.length === 1 ? `长度必须大于${min}` : `长度必须大于${min}、小于${max}`
  return {
    type: 'string',
    message: message,
    validator: (rule, val) => {
      const value = trim(val)
      return value.length >= min && value.length <= max
    },
    trigger: constant.BLUR
  }
}

// 以下是自定义验证规则

// true/false判断 适合 单选 单多选 select等~
const checked = (rule, value) => value
const selected = (rule, value) => value !== ''

const isFullName = (rule, val) => {
  const value = trim(val)
  return /\w/.test(value)
}
const hobby = (rule, val) => val.length >= 2

const sexValidate = (rule, val) => val.length > 0

export const loginRules = {