使用 async-validator 编写小程序表单实时验证组件

妖狐艹你老母 2022-01-17 21:21 349阅读 0赞

# 使用 async-validator 编写 小程序表单实时验证组件 #

## 目录 ##

*  前言
 *  前置知识
 *  需求简介
 *  实现思路简介
 *  主要代码
 *  程序代码地址
 *  后话

## 前言 ##

因为接到 “小程序表单实时验证提示错误信息” 的需求，而翻遍网络小程序表单验证，均是使用 WxValidate 在表单提交时进行判断，不满足需求，遂自定义实现该需求。

## 前置知识 ##

*  [async-validator github 地址][async-validator github]（https://github.com/yiminghe/async-validator）因为 async-validator 可以对数据进行异步校验，并且是个很纯粹的 js 库，所以选择这个库来进行校验
 *  [拜读及分析 Element 源码-form 表单组件篇][Element _-form] （https://juejin.im/post/5b99ff0af265da0a8a6a9439）这篇博客浅显易懂的解释了 element 表单验证源码过程，理解了这个，对于构建组件的思路很有建设性帮助哦 o(
    
    ￣︶￣
    
    )o
 *  [组件间关系][Link 1]（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html） 实现 form 和 form-item 以及 form-item 和 input/picker 之间关系的文档

## 需求简介 ##

1.  输入框输入或选择框选择时实时验证是否符合规范，不符合时底部显示错误提示，符合时不提示
2.  编辑时验证后台接口返回数据是否均符合规范（历史遗留，数据库中会有不符合规范的数据），如有不符合的提示
3.  输入框或选择框未进行操作（未获取焦点），表单提交的时候整体验证，不符合规范的均提示

## 实现思路简介 ##

### 思路简介 ###

> 实现思路均参考 Element-ui 中表单验证的思路

1.  创建 form-item 组件，作为输入框（input）和选择框（picker）的父组件，用来校验 input/picker 的合法性以及错误的显示和隐藏
2.  创建 form 组件，作为多个 form-item 的父组件，用来验证所有 form-item 下的组件的合法性，均合法时返回 true，否则返回 false

### 思路简图（这里均以 input 为例） ###

1.  初始化的过程

*  在 form 的初始化过程中，需要将内部的需要验证的子组件 form-item（带有 prop 属性的组件为需要验证的组件）储存到一个变量中，方便后期使用。
    
    > 这里只保存需要验证的组件可以减少不必要的操作
 *  在 form-item 初始化的过程中，存储父组件 form，因为验证的时候是会需要通知 form 来验证是否已全部验证通过，来进行一些必要的操作（比如未全部通过验证，操作按钮置灰等）
 *  input 初始化的时候，存储父组件 form-item，在输入的时候，调用父组件的验证方法来验证
    
    > 在 input 输入的过程中（oninput）进行验证，这里加下防抖，可以适当的提高性能

1.  验证过程

> input 输入后，进行验证的时候，通知 form-item 来校验，校验完毕后 ① 通知 form 来校验是否所有验证均通过 ② 如若未验证通过，显示报错提示

## 主要代码 ##

1.  form.js

// 默认验证回调
      validateCallBack(flag) {
        this.triggerEvent('ruleResult', flag)
      },
    
      // 验证
      validate(callback = this.validateCallBack.bind(this)) {
        // 如果需要验证的childList为空，调用验证时立刻返回callback
        if (this.data.childList.length === 0 && callback) callback(true)
        // 验证每一个form-item是否都输入正确
        callback(this.data.childList.every(i => !i.data.validateError))
      },复制代码

1.  form-item.js

// 合并规则
    getRules() {
      let formRules = this.properties.rules
      const requiredRule =
        this.properties.required !== undefined
          ? { required: !!this.properties.required, message: '请输入' }
          : []
      return [].concat(formRules || []).concat(requiredRule)
    },
    // 获取符合事件触发的规则
    getFilteredRule(trigger) {
      const rules = this.getRules()
    
      return rules.filter(rule =>
        !rule.trigger || trigger === '' ? true : rule.trigger === trigger
      )
    },
    // 默认错误处理
    errorHandle(errorMessage) {
      this.setData({
        validateError: !!errorMessage,
        validateStatus: errorMessage ? 'error' : 'success',
        validateMessage: errorMessage
      })
    },
    // 验证
    validate(value, trigger = '', callback = this.errorHandle.bind(this)) {
      const prop = this.properties.prop
      // 没有prop，不需要验证
      if (!prop) return
      //获取合并后的规则
      const rules = this.getFilteredRule(trigger)
      // 调用AsyncValidator进行验证
      const validator = new AsyncValidator({ [prop]: rules })
    
      validator.validate({ [prop]: value }, { firstFields: true }, errors => {
        // 不需要校验
        if (errors === undefined) return
        const errorMessage = errors ? errors[0].message : ''
        // 显示错误提示
        callback(errorMessage)
        // 调用form的validate方法判断是否全部正确
        this.data.elForm.validate()
      })
    }复制代码

## 程序代码地址 ##

[github 地址][github]（https://github.com/5kinna/miniprogram-form-validate）

## 后话 ##

这是第一个小程序中的需求，因为经验和能力的欠缺，不免会有不对的地方，还望大神斧正。

转载于:https://juejin.im/post/5cf0f002f265da1b8f1aa814

[async-validator github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fyiminghe%2Fasync-validator
[Element _-form]: https://juejin.im/post/5b99ff0af265da0a8a6a9439
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fcustom-component%2Frelations.html
[github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2F5kinna%2Fminiprogram-form-validate