微信小程序之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()
  },
})
相关推荐
2501_916007472 小时前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域4 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918415 小时前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发6 小时前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php
七七软件开发6 小时前
打车小程序 app 系统架构分析
java·python·小程序·系统架构·交友
换日线°16 小时前
css 不错的按钮动画
前端·css·微信小程序
说私域16 小时前
从渠道渗透到圈层渗透:开源链动2+1模式、AI智能名片与S2B2C商城小程序的协同创新路径研究
人工智能·小程序·开源
qq_4275060817 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
gongzemin1 天前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express
猫头_1 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app