15.微信小程序之async-validator 基本使用

async-validator是一个基于 JavaScript 的表单验证库,支持异步验证规则和自定义验证规则

主流的 UI 组件库 Ant-designElement中的表单验证都是基于 async-validator

使用 async-validator 可以方便地构建表单验证逻辑,使得错误提示信息更加友好和灵活。

使用步骤:

  1. 安装并在项目中导入 async-validator

  2. 创建验证规则

  3. 创建表单验证实例,将验证规则传递给构造函数,产生实例

  4. 调用实例方法 validate 对数据进行验证

    • 第一个参数:需要验证的数据

    • 第二个参数:回调函数,回调函数有两个参数 errors, fields

      • errors:如果验证成功,返回 null,验证错误,返回数组

      • fields:需要验证的字段,属性值错误数组


具体操作:

1.安装 async-validator

复制代码
npm i async-validator

2.开发者工具,点击构建 npm,对 async-validator 进行构建

3.在 js 文件中导入 async-validator

复制代码
// 1️⃣ 引入 async-validator,async-validator 提供了一个构造函数
import Schema from 'async-validator'

Page({
  // 2️⃣定义需要验证的数据
  data: {
    name: '你好'
  },

  // 验证数据
  onValidate() {
    // 3️⃣创建表单验证规则
    const rules = {
      // key 建议和 需要验证的数据字段名字保持一致
      name: [
        // required 是否是必填项
        { required: true, message: 'name 不能为空' },

        // type 数据的类型
        // message 如果验证失败,提示的错误内容
        { type: 'string', message: 'name 不是字符串' },

        // min 最少位数,max 最大位数
        { min: 2, max: 5, message: '名字最少 2 个字,最多 5 个字' }

        // 正则表达式
        // { pattern: '', message: '' }

        // 自定义验证规则
        // { validator: () => {} }
      ]
    }

    // 4️⃣创建表单验证实例
    // 在创建实例时需要传入验证规则
    const validator = new Schema(rules)

    // 5️⃣ 调用 validate 实例方法对数据进行验证
    // validate 方法接收一个对象作为参数,对象是需要验证的数据
    // 注意:validate 方法只会验证和验证规则同名的属性
    validator.validate(this.data, (errors, fields) => {
   // 如果验证失败,errors 是所有错误的数组
      // 如果验证成功,errors 是 null
      console.log(errors)

      // fields 是需要验证的属性,属性值是数组,数组中包含错误信息
      console.log(fields)

      if (errors) {
        console.log('验证没有通过')
        console.log(errors)
        return
      }

      console.log('验证通过')
    })
  }
})
相关推荐
canglingyue10 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
微三云-轩11 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
D1555408805814 小时前
电竞护航小程序成品搭建三角洲行动护航小程序开发俱乐部点单小程序成品游戏派单小程序定制
游戏·小程序
说私域1 天前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
wmsj05781 天前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序
说私域1 天前
开源AI智能名片链动2+1模式S2B2C商城小程序服务提升复购率和转介绍率的研究
人工智能·小程序
服务端技术栈1 天前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008891 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview