微信小程序中表单验证错误提示效果

{{popErrorMsg}} 

 你还可以输入 

 {{commentTxtCount}} 

 字 

 确认发布 

page{background:#f4f4f4;} 

.ad_popHd{height:76rpx;line-height:76rpx;font-size:32rpx;text-align:center;border-bottom:1pxsolid#cdd1cd;padding:020rpx;color:#202120;} 

.ad_popFt{margin:20rpx ;margin-top:50rpx;} 

.ad_popArea{width:708rpx;height:400rpx;font-size:30rpx;padding:20rpx; box-sizing: border-box; -webkit-box-sizing: border-box;line-height:40rpx;color:#333;background:#fff; } 

.ad_popCout{color:#969899;font-size:24rpx;text-align:right;line-height:58rpx;padding:020rpx;} 

.informBtn{background:#09bb07;color:#fff;font-size:34rpx;margin-top:38rpx;height:88rpx;} 

.one_stars{color:#999;} 

.one_star{font-size:20rpx;color:#999;} 

.danger{color:#f64400;} 

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

JS:

// pages/informLeaveMsg/informLeaveMsg.js 

Page({ 

 /** 

 * 页面的初始数据 

 */ 

 data: { 

 }, 

 //确认发布 

 goDetail:function(e){ 

 setTimeout(()=>{ 

  varsubValue = e.detail.value.textarea 

  console.log(subValue) 

  if(subValue ==null|| subValue =="") { 

  console.log("不能为空") 

  this.setData( 

   { popErrorMsg:"发布的留言内容不能为空"} 

  ); 

  this.ohShitfadeOut(); 

  return;  

  } 

 },100) 

 }, 

 ohShitfadeOut() { 

 varfadeOutTimeout = setTimeout(() => { 

  this.setData({ popErrorMsg:''}); 

  clearTimeout(fadeOutTimeout); 

 }, 3000); 

 }, 

})