• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序——表单验证插件WxValidate的二次封装(二)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在上一篇博客《微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装》中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面上的表现还是通过弹出框的形式,且只能弹出第一个错误,这种做法总体感觉还是不太友好的,没有看过效果的同学可以先看上一篇文章。

今天抽空把错误呈现的方式重新修改了下,按照惯例,先看最终效果

通过上面的效果可以看到,当页面表单验证有错误时,将显示所有的错误,且自动定位到相应的表单处,由于考虑到手机屏幕一般都不大,所以最后会自动隐藏。这里我为了使最终的图片比较小,设置的隐藏动画的时间只有3秒,实际使用时,可以设置的稍微长点。

目前这种效果在使用时,也还是有一定的不足,例如我展示的这样,页面需要填写的东西非常多,报的错误也非常多,那么因为是同时消失,所以会导致使用者看不全所有的错误,但是由于微信小程序在动态修改页面样式、动态添加控件方面实在太坑爹,如果要完全做到跟WEB一样,最后会导致开发和使用过程中非常复杂,我个人觉得没有这个必要,毕竟在小程序里,这种页面不可能太多,太多了用小程序也不合适。

 

一、修改wxml文件

  在页面上新增错误显示的容器元素,直接使用下面的,不用修改。

  1.  
    <block wx:for="{{arrValidate}}" wx:for-item="validateErrorText">
  2.  
    <view class="validateText" animation="{{vaildateErrorText_animation}}" style="visibility:{{validateErrorText.visibility}};top:{{validateErrorText.top}};left:{{validateErrorText.left}};">
  3.  
    {{validateErrorText.msg}}
  4.  
    </view>
  5.  
    </block>

二、修改app.wxss文件

     新增错误显示容器的样式。

  1.  
    .validateText{
  2.  
    visibility:hidden;
  3.  
    position: absolute;
  4.  
    color: red;
  5.  
    border: 1px solid #dfdfdf;
  6.  
    width: 400rpx;
  7.  
    min-height: 25px;
  8.  
    box-shadow: 2px 2px 2px #888888;
  9.  
    border-radius:5px;
  10.  
    display: flex;
  11.  
    align-items:flex-start;
  12.  
    justify-content:flex-end;
  13.  
    padding: 5px;
  14.  
    background-color: #ffffff;
  15.  
    opacity:0.87;
  16.  
    z-index: 999;
  17.  
    }
  18.  
    .validateText:before{
  19.  
    content: \'* \';
  20.  
    }

三、修改WxValidate.js

  1.  
    query.selectAll(".wxValidate").fields({
  2.  
    id: true,
  3.  
    size:true,
  4.  
    dataset: true,
  5.  
    rect:true,
  6.  
    properties: [\'validate\', \'fieldname\'],
  7.  
    context: true
  8.  
    }, function(res) {
  9.  
    res.dataset
  10.  
    res.context
  11.  
    }).exec(function(res) {
  12.  
    const arr = res[0];
  13.  
    //console.log(arr)
  14.  
    for (const i in arr) {
  15.  
    var id = arr[i].id
  16.  
    var fieldname = arr[i].dataset.fieldname;
  17.  
    var validate = util.trim(arr[i].dataset.validate);
  18.  
    rules[id] = util.defaultIfEmpty(rules[id], {});
  19.  
    messages[id] = util.defaultIfEmpty(messages[id], {})
  20.  
    messages[id].top = arr[i].top;
  21.  
    messages[id].left = arr[i].left;
  22.  
    messages[id].width = arr[i].width;
  23.  
    that.__getFormatValidate(rules[id], messages[id], id, fieldname, validate);
  24.  
    }
  25.  
    });

主要是多了messages[id].top = arr[i].top;        messages[id].left = arr[i].left;        messages[id].width = arr[i].width; 

用于获取当前表单的位置和宽度,用于错误显示框的定位。

四、修改提交表单事件

  1.  
    formSubmit: function (e) {
  2.  
    util.loadingMsg("数据提交中,请稍后...");
  3.  
    var that = this;
  4.  
    console.log(\'form发生了submit事件,携带的数据为:\', e.detail.value)
  5.  
    const params = e.detail.value;
  6.  
    console.log(params)
  7.  
    console.log(this.WxValidate.rules)
  8.  
    console.log(this.WxValidate.messages)
  9.  
    //校验表单
  10.  
    if (!this.WxValidate.checkForm(params)) {
  11.  
    var arrValidate = new Array();
  12.  
    let top = 0;
  13.  
    for (const i in this.WxValidate.errorList){
  14.  
    const error = this.WxValidate.errorList[i]
  15.  
    if(i==0){
  16.  
    top = error.top;
  17.  
    }
  18.  
    const validateErrorText= {id:error.param, visibility: "inherit", top: error.top + "px", left: error.left + "px", msg: error.msg }
  19.  
    arrValidate[i]=validateErrorText;
  20.  
    }
  21.  
    this.setData({arrValidate: arrValidate});
  22.  
     
  23.  
    // const error = this.WxValidate.errorList[0]
  24.  
    // //util.alert("错误提示",error.msg+error.left+" ** "+error.top)
  25.  
     
  26.  
    // that.setData({
  27.  
    // validateErrorText: { visibility:"inherit",top:error.top+"px",left:error.left+"px",msg:error.msg}
  28.  
    // })
  29.  
    wx.pageScrollTo({
  30.  
    scrollTop: top,
  31.  
    duration:500
  32.  
    });
  33.  
    setTimeout(function(){
  34.  
    console.log("***timeout")
  35.  
    util.fadeOut(that, "vaildateErrorText_animation", 0);
  36.  
    },5000);
  37.  
    wx.hideLoading();
  38.  
    return false
  39.  
    } wx.hideLoading();
  40.  
    //向后台发送时数据 wx.request...
  41.  
    util.alert("成功提示", \'提交成功 :\' + e.detail.value.date);
  42.  
    }

这里主要是将所有的错误循环出来并显示。

五、修改util.js

新增一个淡入淡出的动画函数:

  1.  
    function fadeOut(that, animationId, opacity, data) {
  2.  
    var animation = wx.createAnimation({
  3.  
    duration: 3000,
  4.  
    timingFunction: \'ease\',
  5.  
    });
  6.  
    animation.opacity(opacity).step();
  7.  
    var json = {};
  8.  
    json[animationId] = animation.export();
  9.  
    if(isNotEmpty(data)){
  10.  
    Object.assign(json,data)
  11.  
    }
  12.  
    //设置动画
  13.  
    that.setData(json);
  14.  
    }

 在CSDN的本文链接:https://blog.csdn.net/zhuiyue82/article/details/100040614


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap