微信小程序表单验证-微信小程序动态表单

{{validateErrorText.msg}}

2.修改app.wxss文件

添加了错误显示容器样式。

.validateText{

可见性：隐藏；

位置：绝对；

红色;

边框：1px 实心#dfdfdf；

宽度：400rpx；

最小高度：25px；

框阴影：2px 2px 2px #888888；

边界半径：5px；

显示：弹性；

对齐项目：弹性启动；

证明内容：flex-end；

填充：5px；

背景色：#ffffff；

不透明度：0.87；

z-指数：999；

}

.validateText:之前{

内容： '*';

}

3.修改WxValidate.js

query.selectAll(".wxValidate").fields({

编号：真实，

尺寸：真实，

数据集：真实，

正确的微信小程序表单验证，

属性：['验证'，'字段名']，

上下文：真实

}, 函数(资源) {

资源数据集

资源上下文

}).exec(函数(资源){

const arr = res[0];

//安慰。 日志（arr）

对于（常量我在 arr）{

变量 id = arr[i].id

var 字段名 = arr[i].dataset.fieldname;

var validate = util.trim(arr[i].dataset.validate);

规则 [id] = 实用程序。 defaultIfEmpty(规则[id], {});

消息[id] = 实用程序。 defaultIfEmpty(消息[id], {})

消息[id].top = arr[i].top;

消息[id].left = arr[i].left;

消息[id].width = arr[i].width;

that.__getFormatValidate(rules[id], messages[id], id, fieldname, validate);

}

});

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

用于获取当前窗体的位置和宽度，用于错误显示框的定位。

四、修改提交表单事件

表单提交：函数（e）{

util.loadingMsg("数据提交，请稍候...");

那个=这个；

console.log('表单发生提交事件微信小程序表单验证，携带的数据为：', e.detail.value)

const params = e.detail.value;

安慰。 日志（参数）

console.log(this.WxValidate.rules)

console.log(this.WxValidate.messages)

//验证表单

如果（！this.WxValidate.checkForm（参数））{

var arrValidate = new Array();

让顶部= 0；

for (const i in this.WxValidate.errorList){

常量错误 = this.WxValidate.errorList[i]

如果（我==0）{

顶部=错误。 最佳;

}

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});

// const error = this.WxValidate.errorList[0]

// //util.alert("错误提示", error.msg+error.left+" ** "+error.top)

// 那.setData({

// validateErrorText: { visibility:"inherit",top:error.top+"px",left:error.left+"px",msg:error.msg}

// })

wx.pageScrollTo({

滚动顶部：顶部，

持续时间：500

});

设置超时（功能（）{

console.log("***超时")

效用。 fadeOut(that, "vaildateErrorText_animation", 0);

},5000);

wx.hideLoading();

返回假

} wx.hideLoading();

//向后台发送数据时wx.request...

util.alert("成功提示", '提交成功：' + e.detail.value.date);

}

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

5.修改util.js

添加淡入淡出动画功能：

function fadeOut(that, animationId, opacity, data) {

var animation = wx.createAnimation({

持续时间：3000，

计时功能：'缓和'，

});

animation.opacity(不透明度).step();

变种JSON = {};

json[animationId] = 动画。 出口（）;

如果（isNotEmpty（数据））{

目的。 分配（json，数据）

}

// 设置动画

那。 设置数据（json）；

}

CSDN中这篇文章的链接：