微信小程序表单验证插件WxValidate的二次封装功能（终极版）-创新互联

微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好，第一篇里的效果是将错误信息通过对话框形式弹出来，这种形式在web形式下早已经淘汰了；第二篇是一次性全部显示所有的错误，然后3秒后自动消失，

蓬莱网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

这种在极端情况下也不太好，例如我例子里的一页的表单个数非常多的情况下，可能后面的还没看到就消失了。所以最近又重新做了一版，最终版的效果如下图：错误信息一次性全部显示，可以通过点击信息框让其消失，将自动消失时间设置的稍微长点，例如10秒，这样就能比较好的兼顾效果和使用上的便捷。

先讲讲最终版与前面2版的不同点

1.前面版本中提到，表单空间里需要添加3个参数：id,data-fieldname,data-validate 。最终版中只需要 data-validate 即可。

2.由于需要点击错误信息框后使其隐藏，则需要通过微信小程序wxs事件响应功能，新增事件

一、util.wxs文件

module.exports = {
 hiddenValidateError: hiddenValidateError
}
function hiddenValidateError(event, ownerInstance) {
 var index= event.target.dataset.index;
 var instance = ownerInstance.selectComponent('.validateText'+index) // 返回组件的实例
 instance.setStyle({
 "visibility": "hidden"
 }) 
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：微信小程序表单验证插件WxValidate的二次封装功能（终极版）-创新互联
文章来源：http://bjjierui.cn/article/desjhc.html