微信小程序:miniprogram-validator进行表单校验

简介: 微信小程序:miniprogram-validator进行表单校验

miniprogram-validator

基于 WxValidate - 表单验证 扩展的微信小程序表单验证器,规则配置可参考其文档。

配置规则格式参考 ElementUI 使用的async-validator(仅参考其格式)

表单校验的方案:

  • 后端校验:无论前端是否校验,数据入库前都需要进行校验
  • 前端校验:如果需要提升用户体验或者减少请求次数的情况下,前端需要数据校验。如果应用的要求不高,可以免去前端校验

使用示例

将两个文件拷贝到文件夹下

libs/
    validator.js
    WxValidate.js
const Validator = require('./validator.js');
// 需要校验的数据
let data = {
  name: 'Tom',
  age: 10,
  school: 'A',
};
// 校验规则 {field: rules}
let rules = {
  name: [{ message: '姓名不能为空', required: true }],
  age: [
    { message: '年龄不能为空', required: true },
    { message: '年龄不能大于10', max: 10 },
  ],
  school: [
    {
      message: '学校只能是A/B',
      validator: (value, param) => {
        return !value || (value && ['A', 'B'].includes(value));
      },
    },
  ],
};
let validator = new Validator(rules);
let error = validator.validate(data);
if (error) {
  console.log('校验出错');
  console.log(error);
} else {
  console.log('校验通过');
}

完整代码:

https://github.com/mouday/miniprogram-validator

相关文章
|
Python
pycharm正确配置国内镜像源的方式
配置国内镜像源和解决虚拟环境(Venv)中安装bs4或者其他的第三方库的错误 —— Could not find a version that satisfies the requirement bs4 国内镜像源推荐 阿里 mirrors.aliyun.com/pypi/simple… 清华 pypi.tuna.tsinghua.edu.cn/simple/ 豆瓣 pypi.douban.com/simple/ 注意这里都是 https 的,不然下载包的时候会出现其他
11039 0
|
JSON JavaScript 定位技术
echarts:从github及其镜像下载china.js和china.json
echarts:从github及其镜像下载china.js和china.json
6220 0
|
小程序 前端开发 Java
|
XML JSON Java
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
|
存储 C语言 开发者
《C 语言内存管理:动态分配的艺术与陷阱》
《C 语言内存管理:动态分配的艺术与陷阱》深入探讨了C语言中内存管理的核心概念和技术,包括动态内存分配的原理、常见错误及避免方法,旨在帮助开发者提高程序效率和稳定性。
|
Java 测试技术 开发者
Java线程池ThreadPoolExcutor源码解读详解09-4种拒绝策略
本文介绍了线程池的四种拒绝策略:AbortPolicy、DiscardPolicy、DiscardOldestPolicy和CallerRunsPolicy,并通过代码示例展示了它们在任务过多时的不同处理方式。AbortPolicy会抛出异常并停止主线程;DiscardPolicy会默默丢弃新任务;DiscardOldestPolicy会抛弃队列中最旧的任务来接纳新任务;而CallerRunsPolicy则是由调用者线程执行被拒绝的任务,以减缓新任务的提交速度。这四种策略适用于不同的场景,开发者可以根据需求选择合适的策略。
1655 5
|
机器学习/深度学习 人工智能 监控
Spring Boot与AI机器学习技术探索方向和实施方
Spring Boot与AI机器学习技术探索方向和实施方
485 0
|
关系型数据库 MySQL
922.【mysql】if 函数
922.【mysql】if 函数
622 3
|
JSON 小程序 开发工具
【微信小程序】--JSON 配置文件作用(三)
【微信小程序】--JSON 配置文件作用(三)
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统(一)
微信小程序云开发|基于微信小程序实现房产中介平台系统
331 0