微信小程序: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('校验通过');
}
相关文章
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
580 0
|
12月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
407 2
|
11月前
|
JSON 数据可视化 小程序
uview/小程序可视化表单代码生成器文档
uview/小程序可视化表单代码生成器文档
147 0
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
235 0
|
11月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2411 7
|
5月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
11月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1888 1
|
6月前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
1778 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
11月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
1615 7

热门文章

最新文章