在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面上的表现还是通过弹出框的形式,且只能弹出第一个错误,这种做法总体感觉还是不太友好的,没有看过效果的同学可以先看上一篇文章. 今天抽空把错误呈现的方式重新修改了下,按照惯例,先看最终效果 通过上面的效果可以看到,当页面表单验证有错误时,将显示所有的错误,且自动定位到相应的表单处,由于考虑到手机屏幕一般都不大,所…

微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2…

插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js    地址: https://github.com/skyvow/wx-extend/tree/master/src/assets/plugins/wx-validate 步骤一:将文件 WxValidate.js 拷贝到utils目录下 步骤二:2…

弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='submitCheckInfo'> <!-- 提示警告! --> <view class='wran-tips' style='{{displayWarn}}'> <text>{{warnInfo}}</text> </view> <vie…

在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时把jqueryValidate做了再次封装,新增了一些新的常用判断,也修改了一些关键字. 小程序同样也存在验证的问题,在网上搜索了一下,目前用的比较多的是WxValidate,下载地址和用法如下 github: https://github.com/skyvow/wx-extend 但是这个插件用起…

wxml <view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" plain="{{buttom.plain}}" disabled="{{buttom.disabled}}" loading="{{buttom.loading}}" >实例按钮</button> </view> <…

button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ /** 修改button默认的点击态样式类**/ .button-hover { background-color: red; } /** 添加自定义button点击态样式类**/ .other-button-hover { background-color: blur; } <button ty…

发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'search', data: { content: e.detail.value.content, /*tag: 1,*/ miaoshu: e.detail.value.miaoshu, /*tag: 1,*/ jiage: e.detail.value.jiage, tag: 1, /*lianxifan…

js代码 Page({                   /**    * 页面的初始数据    */         data: {         indicatorDots: false,         autoplay: false,         interval: 5000,         duration: 1000,         proList: null,         name:"",         phone:"",      …

本地添加4张图片并显示至页面——组件位置.设置样式.列表渲染 Q.button是一张图片,需要实现点击这张图片后选择本地图片后显示至页面,不知道怎么让本地图片将button挤到右边  S.在wxml中将本地图片显示区放在button区前面,我将两个区的样式设得一样 Q.点击button后添加1/多张图片显示至页面的区别  S.列表渲染部分,后者添加的是数组,需要用到_this.data.ObjectArray.concat(res.tempFilePaths) 点击按钮前的页面 点击按钮后的页面…