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

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