微信小程序：miniprogram

您所在的位置：网站首页 › validatorjs做表单校验 › 微信小程序：miniprogram

微信小程序：miniprogram

2023-06-12 22:18| 来源: 网络整理| 查看: 265

微信小程序：miniprogram-validator进行表单校验原创

彭世瑜 2021-10-29 13:44:14 ©著作权

文章标签微信小程序前端小程序数据表单验证文章分类代码人生

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任 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

打赏赞收藏评论分享举报

上一篇：css：flex布局最后一个子元素靠右摆放

下一篇：ElementUI：表格table列宽度压缩出现空白

【本文地址】

微信小程序：miniprogram

微信小程序：miniprogram

今日新闻

推荐新闻