DDR爱好者之家 Design By 杰米
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了;第二篇是一次性全部显示所有的错误,然后3秒后自动消失,
这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了。所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如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" }) }
二、wxml文件
<wxs module="wxs" src="/UploadFiles/2021-04-02/util.wxs">三、form.js
onReady: function () { //验证方法 this.WxValidate = new WxValidate(); }, formSubmit: function (e) { util.loadingMsg("数据提交中,请稍后..."); var that = this; console.log('form发生了submit事件,携带的数据为:', e.detail.value) const params = e.detail.value //校验表单 if (!this.WxValidate.checkForm(params)) { var arrValidate = new Array(); let top = 0; for (const i in this.WxValidate.errorList){ const error = this.WxValidate.errorList[i] if(i==0){ top = error.top; } const validateErrorText= {id:error.param, visibility: "inherit", top: error.top + "px", left: error.left + "px", msg: error.msg } arrValidate[i]=validateErrorText; } this.setData({arrValidate: arrValidate}); ) wx.pageScrollTo({ scrollTop: top, duration:500 }); setTimeout(function(){ util.fadeOut(that, "vaildateErrorText_animation", 0); },10000); wx.hideLoading(); return false } wx.hideLoading(); //向后台发送时数据 wx.request... util.alert("成功提示", '提交成功 :' + e.detail.value.date); }以上代码就是提交表单用到的关键代码,在实际使用是,最好将提交功能也做一个封装,这样以后就不用每次都写这么多代码了,关于提交功能的封装,等有空的时候在写了,表单验证插件终极版本在点击下方路径下载:
https://github.com/zhuiyue82/wx-wxValidate2.0
总结
以上所述是小编给大家介绍的微信小程序表单验证插件WxValidate的二次封装功能(终极版),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]