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

在上一篇博客<微信小程序——仿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…

先上代码. login.wxml <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips> <view class="page-body"> <mp-form id="form" rules="{{rules}}" models="{{formData…

1.适用场景 表单 ( 支持自定义规则 ) 2.相关文章 jQuery Validate 3.实际问题 JqueryValidate表单相同Name不校验问题解决…

表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件的值.其主要属性: 主要代码,…

<form bindsubmit="formSubmit"> <view class="txt"> <view class="ima"></view> <view class="txt2">姓名</view> <input placeholder="请输入姓名" maxlength="10" class=&qu…

微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡--> 详情查看 2.数据库设计分析 **所有表共有字段 *com ** [x] create_time 记录的创建时间 [x] update_time 记录最近的一次修改时间 动态表设计 circles_list 既然是仿朋友圈功能实现,那么数据实体必然包括 文字(主题内容) 和 图片. [x] co…