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

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

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

1.前面版本中提到，表单空间里需要添加3个参数：id，数据字段名称，数据验证。最终版中只需要数据验证即可。

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

一、util.wxs文件

模块。导出={ hiddenValidateError : hiddenValidateError }函数hiddenValidateError(event，owner interest){ var index=event。目标。数据集。指数；var instance=ownerrinsitivity。selectcomponent(' .validateText' index) //返回组件的实例实例。setstyle({“可见性”:“隐藏”})}二、wxml文件

成语练习题选择题模块='wxs' src='http:/./utils/util。wxs/wxsblock wx : for=' { { arrValidate } } ' wx : for-item=' validate errorttext ' view class=' validate text validate text。index } ' animation=' { { vaidateerrortettext _ animation } } ' style=' visibility : { { validateerrortettext }。可见性} }；top : { { validateerrortext。top } }”左： { { validateerrortext。左} }；数据索引=' { { validateerrortext。index } } ' bind tap=' { { wxs。hiddenvalidateerror } } ' { { validateerrorttext。msg } }/view/block form bind submit=' formSubmit ' view class=' wide-info ' view class=' wide-info-list '！-姓名-view class=' info-list ' view class=' info-list-1 ft ' text class=' notEmptyClass '姓名/text/view view class=' info-list-right '输入名称=' tname '占位符='请输入value=' { { form。tname } } ' class=' wxValidate inputName ' data-validate=' notEmpty | size[4，10]'//view/view./view！-按钮-view class=' buttons-kind ' button class=' fabu ' form-type=' submit '发布/按钮/视图/表单三、form.js

onReady:函数(){ //验证方法这个WxValidate=new WxValidate()；}，formSubmit:函数{ util。正在加载SG('数据提交中，请稍后.');变量=这个；console.log('表单发生了使服从事件，携带的数据为：' e .细节。值)常量参数=e . detail。value//校验表单if(！这个wxvalidate。check form(params)){ var arrValidate=new Array()；让top=0；因为（在这方面)。wxvalidate。错误列表){常量错误=这个.wxvalidate。错误列表[I]if(I==0){ top=错误。顶部；} const validateerrorttext={ id :错误。param，visibility: 'inherit '，top:错误. top 'px '，left:错误. left 'px '，msg :错误。msg } arrValidate[I]=validate errortettext；}这个。setdata({ arrValidate : arrValidate })；)wx。页面滚动到({滚动顶部：持续时间：500 })；setTimeout(函数(){ util。淡出(即、“vaildateErrorText _ animation”，0)；},10000);wx。hide loading()；返回false } wx。hide loading()；//向后台发送时数据请求.util.alert('成功提示', '提交成功东经：度。价值。日期)；}以上代码就是提交表单用到的关键代码，在实际使用是，最好将提交功能也做一个封装，这样以后就不用每次都写这么多代码了，关于提交功能的封装，等有空的时候在写了，表单验证插件终极版本在点击下方路径下载：

https://github.com/zhuiyue82/wx-wxValidate2.0

总结

以上是边肖推出的微信小程序表单验证插件WxValidate的二次封装功能(终极版)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！