热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

微信小程序表单验证插件WxValidate的二次封装功能(终极版)

这篇文章主要介绍了微信小程序表单验证插件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文件



 
 {{validateErrorText.msg}}
 







姓名





......





三、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的二次封装功能(终极版),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 简化报表生成:EasyReport工具的全面解析
    本文详细介绍了EasyReport,一个易于使用的开源Web报表工具。该工具支持Hadoop、HBase及多种关系型数据库,能够将SQL查询结果转换为HTML表格,并提供Excel导出、图表显示和表头冻结等功能。 ... [详细]
  • 本文探讨了如何在Classic ASP中实现与PHP的hash_hmac('SHA256', $message, pack('H*', $secret))函数等效的哈希生成方法。通过分析不同实现方式及其产生的差异,提供了一种使用Microsoft .NET Framework的解决方案。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 本文详细介绍如何使用 Python 集成微信支付的三种主要方式:Native 支付、APP 支付和 JSAPI 支付。每种方式适用于不同的应用场景,如 PC 网站、移动端应用和公众号内支付等。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 微信小程序koa获取微信accesstoken ... [详细]
  • 微信小程序实现拍照与图片上传功能
    本文介绍如何在微信小程序中实现用户通过拍照或从相册选择图片,并将图片上传至服务器的功能,包括调用相关API和处理上传响应。 ... [详细]
  • 本文介绍了如何使用外向烧鹅IO库来封装GET请求的具体步骤,包括库的安装与配置、请求拦截器的设置以及如何在Vue项目中调用这些封装好的请求方法。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 1、文件位置:mntwwwrootaddonswe7_wmallincwebstoretangshitable.inc.php改为下面这个$paramsarr ... [详细]
  • PHP中静态类与静态变量的应用差异探讨
    本文深入探讨了PHP编程语言中静态类与静态变量的具体应用及其差异性,旨在帮助开发者更好地理解和运用这些概念,以提升代码质量和效率。 ... [详细]
author-avatar
手机用户2602916917
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有