微信小程序表单验证插件WxValidate的二次封装功能
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了微信小程序表单验证插件WxValidate的二次封装功能(终极版),文中给大家提到了最终版与前面2版的不同点,需要的朋友可以参考下
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在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="../../utils/util.wxs"></wxs> <block wx:for="{{arrValidate}}" wx:for-item="validateErrorText"> <view class="validateText validateText{{validateErrorText.index}}" animation="{{vaildateErrorText_animation}}" style="visibility:{{validateErrorText.visibility}};:{{validateErrorText.}};left:{{validateErrorText.left}};" data-index="{{validateErrorText.index}}" bindtap="{{wxs.hiddenValidateError}}"> {{validateErrorText.msg}} </view> </block> <form bindsubmit="formSubmit"> <view class="wide-info"> <view class="wide-info-list"> <!--姓名--> <view class="info-list"> <view class="info-list-1eft"> <text class="notEmptyClass">姓名</text> </view> <view class="info-list-right"> <input name='tname' placeholder='请输入' 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">发布</button> </view> </form>
三、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 = 0; for (const i in this.WxValidate.errorList){ const error = this.WxValidate.errorList[i] if(i==0){ = error.; } const validateErrorText= {id:error.param, visibility: "inherit", : error. + "px", left: error.left + "px", msg: error.msg } arrValidate[i]=validateErrorText; } this.setData({arrValidate: arrValidate}); ) wx.pageScrollTo({ scrollTop: , 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); }
以上代码就是提交表单用到的关键代码,在实际使用是,最好将提交功能也做一个封装,这样以后就不用每次都写这么多代码了,关于提交功能的封装,等有空的时候在写了,表单验证插件终极版本在点击下方路径下载:
总结
以上所述是长沙网络推广给大家介绍的微信小程序表单验证插件WxValidate的二次封装功能(终极版),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程