微信小程序表单验证错误提示。

在之前，在做填写表单之类的东西时候，凡是需要判断是否合格的，我都会给他

wx.showToast({

title: '手机号有误！',
icon: 'loading',
duration: 2000

})

之类的等等。

因为这个弹框确实是有点影响用户的操作流畅性。于是，我就四处浏览各种form表单的醋无提示方法。

最后脚本之家有人发的提示帖子中看到。

弹出在顶部的错误提示。具体的代码如下：

在WXML里面创建view：

<view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view>

WXSS具体的样式也粘出来：

.ad_popError{ background: #de352d; color: #fff; height: 70rpx; line-height: 58rpx; font-size: 30rpx; text-align: center; position: absolute; left: 0; top: 0; width: 100%; z-index:3;}

在JS中 data中定义popErrorMsg：‘’

下面就是需要给用户错误提示的时候，给popErrorMsg 赋值即可！

this.setData(
{ popErrorMsg: "错误提示" }
);
this.ohShitfadeOut();

ohShitfadeOut() {
var fadeOutTimeout = setTimeout(() => {
this.setData({ popErrorMsg: '' });
clearTimeout(fadeOutTimeout);
}, 3000);
},

以上文章内容只是以一个微信小程序初学者慢慢了解到的一些自己觉得比较使用的方法。

学如逆水行舟，不进则退！

微信小程序表单验证错误提示。相关推荐

微信小程序表单post提交数据
微信小程序以post方式提交数据踩坑在以post方式提交微信小程序表单数据时,请求头中要添加一条信息 header: {"Content-Type": "applica ...
微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序表单提交及自定义表单验证
实例作用:帮助开发者获取input.text以及页面data数据进行提交适用范围:小程序的所有基础库 wxml中的绑定 <textarea placeholder="文本类型&quo ...
微信小程序表单含多图上传
html <form class="page__bd" bindsubmit="formSubmit" bindreset="formReset ...
微信小程序表单提交PHP后台
一.首先先把小程序页面写好,这个不多说了,直接上代码 <form bindsubmit="formSubmit" bindreset="formReset" ...
微信小程序表单框架01
简易表单wxml界面代码与界面效果文本框样式: 点击多列选择器,代码与效果如下: 多列选择器js代码:
微信小程序表单获取神器
文章目录学习原因: 学习内容: 学习产出: 学习原因: 在小程序开发中,我们常常会遇到这样的输入框在常规情况下,我们会想着给输入框绑定一个失去焦点触发的事件去获取我们输入的内容,比如下面这一段代码 ...
微信小程序表单显示上次填写内容缓存实现input回填
表单信息填写一次,下次如果无需修改不必再填,直接显示.. 用wx.getStorageSync(KEY)来判断本地缓存,用wx.setStorageSync(KEY,DATA)来设置缓存,用input ...
微信小程序表单提交传值
1. 表单提交事件全局变量存储在app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs ...

微信小程序表单验证错误提示。

微信小程序表单验证错误提示。相关推荐

最新文章

热门文章