打开社区，突然发现社区变白了，应该是擦粉了。🤣🤣🤣

分享一个表单验证组件，可提供数据验证和界面错误显示，效果截图如下：

传送门在这里

https://github.com/ikrong/miniprogram-form-validator

下面格式不知道为什么都乱了，这什么鬼编辑器😒😒😒

安装

npm install miniprogram-form-validator
// or
yarn add miniprogram-form-validator

引入

在app.json中引入可全局使用 引入之后需要点击小程序开发工具的 【工具>构建npm】, 否则会报错的

{  
   "usingComponents": {
     "form-validator": "miniprogram-form-validator/form-validator",
     "form-tip": "miniprogram-form-validator/form-tip"
   }
}

<form-validator id="form" formGroup="{{formGroup}}"  formData="{{formData}}">
    <form-tip name="id"></form-tip>
</form-validator>

验证器的字段含义

{
     required: true, // 是否必填
     message: "", // 出错后的提示信息
     type: "", // 内置验证方法
     regexp: RegExp, // 正则表达式
     validator: Function // 自定义验证方法，返回 boolean 或者 Promise<boolean>
}

Page({
    data:{
        formGroup:{
            id:[
                { required:true },
                {
                    validator:(value,name)=>Promise<Boolean>
                },
            ]
        },
        formData:{
            id:"",
        }
    },
    async validate(){
        let result = await this.selectComponents("#form").validate();
        // 验证通过了
    }
})