微信小程序之async-validator

文章目录

微信小程序之async-validator

概述

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

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

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

依赖库

复制代码
npm i async-validator

验证规则

type:识别类型

string: 必须是string.This is the default type.

number: 必须是number.

boolean: 必须是boolean.

method: 必须是function.

regexp: 必须是正则或者是在调用new RegExp 时不报错的字符串.

integer: 整数.

float: 浮点数.

array: 必须是数组,通过Array.isArray 判断.

object: 是对象且不为数组.

enum: 值必须出现在enmu 枚举值中.

date: 合法的日期,使用Date 判断

url: url.

hex: 16进制.

email: 邮箱地址.

required:是否必填

使用 required 属性判断是否必填。

pattern:正则

使用 pattern 属性支持正则验证。

range:范围

使用 min 和 max 属性定义值的范围。

length:长度

使用 len 属性定义值的长度,如果 len 与 max/min 同时使用,len 优先。

enum:枚举

复制代码
const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};

使用

wxml:

复制代码
<input model:value="{{ userName }}" type="text" auto-focus placeholder="请输入姓名" />
<input model:value="{{ userAge }}" type="number" placeholder="请输入年龄" />
<input model:value="{{ userIdCard }}" type="idcard" placeholder="请输入身份证号" />
<input model:value="{{ userPhone }}" type="number" placeholder="请输入电话" />
<button bindtap="onCheck">验证</button>

js:

javascript 复制代码
import Schema from "async-validator"

Page({
  data: {
    userName: "",
    userAge: "",
    userIdCard: "",
    userPhone: "",
  },
  onValidator() {
    const nameReg = "^[a-zA-Z\\d\\u4e00-\\u9fa5]+$"
    const phoneReg = "^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$"
    // 定义规则
    const rules = {
      userName: [
        { required: true, message: "姓名不能为空" },
        { min: 2, max: 4, message: "姓名最少2个字,最多4个字" },
        { pattern: nameReg, message: "姓名不合法  " },
      ],
      userAge: [{ required: true, message: "年龄不能为空" }],
      userIdCard: [
        { required: true, message: "证件号不能为空" },
        { len: 18, message: "证件号必须是18位" },
      ],
      userPhone: [
        { required: true, message: "手机号不能为空" },
        { pattern: phoneReg, message: "手机号不合法" },
      ],
    }
    // 实例化
    const validator = new Schema(rules)
    // 验证
    validator.validate(this.data, (errors, fields) => {
      if (errors) {
        console.log("errors", errors)
        wx.showToast({
          title: errors[0].message,
        })
      } else {
        // 验证全部通过
        wx.showToast({
          title: "验证通过",
        })
      }
    })
  },
  onCheck() {
    this.onValidator()
  },
})
相关推荐
知识分享小能手10 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
小咕聊编程10 小时前
【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统
微信小程序·小程序·毕业设计·教学辅助系统
一匹电信狗11 小时前
【MySQL】数据库基础
linux·运维·服务器·数据库·mysql·ubuntu·小程序
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
2501_9159090614 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
软希网分享源码1 天前
WIFI大师小程序4.1.9独立版源码(源码下载)
小程序·wifi大师小程序
说私域1 天前
互联网新热土视角下开源AI大模型与S2B2C商城小程序的县域市场渗透策略研究
人工智能·小程序·开源
小咕聊编程1 天前
【含文档+PPT+源码】基于微信小程序的关爱老年人在线能力评估系统
微信小程序·小程序·毕业设计·老人能力评估
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
2501_915918412 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview