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

{{popErrorMsg}} 
 
 
   
 <view class="ad_popCout"> 
 <text class="one_star">你还可以输入</text> 
 <text class="one_stars {{!!tips?'danger':''}}">{{commentTxtCount}}</text> 
 <text class="one_star">字</text> 
 </view> 
 <button class="informBtn" form-type="submit">确认发布</button> 
</form> 
</view></pre>登录后复制</code><p></p><p>WXSS:<br/></p><p class="jb51code"></p><code style="position:relative;"><pre class="brush:css;toolbar:false;">page{background: #f4f4f4;} 
.ad_popHd{height: 76rpx; line-height: 76rpx; font-size: 32rpx;text-align: center; border-bottom: 1px solid #cdd1cd; padding: 0 20rpx;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: 0 20rpx;} 
.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;}</pre>登录后复制</code><p></p><p>JS:<br/></p><p class="jb51code"></p><code style="position:relative;"><pre class="brush:js;toolbar:false;">// pages/informLeaveMsg/informLeaveMsg.js 
Page({ 
 
 /** 
 * 页面的初始数据 
 */ 
 data: { 
  
 }, 
 //确认发布 
 goDetail:function(e){ 
 setTimeout(()=>{ 
  var subValue = e.detail.value.textarea 
  console.log(subValue) 
  if (subValue == null || subValue == "") { 
  console.log("不能为空") 
  this.setData( 
   { popErrorMsg: "发布的留言内容不能为空" } 
  ); 
  this.ohShitfadeOut(); 
  return;  
  } 
  
 },100) 
  
 }, 
 
 ohShitfadeOut() { 
 var fadeOutTimeout = setTimeout(() => { 
  this.setData({ popErrorMsg: '' }); 
  clearTimeout(fadeOutTimeout); 
 }, 3000); 
 }, 
 
})</pre>登录后复制</code><p></p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p><p>相关推荐：</p><p>如何解决微信小程序搭建及解决登录失败的问题<br/></p><p>微信小程序引用公共js里的方法<br/></p><p></p><p class="clearfix"><span class="jbTestPos"></span><p>以上就是微信小程序表单验证错误提示效果的详细内容，更多请关注zzsucai.com其它相关文章！</p></span><p align="center"><img src="https://img.zzsucai.com/202210/08/phpgzh.png" style='width:100%;' /></p><div class="keyword"><i class="fa fa-tags"></i>  标签：
      <a class="tag" href="https://www.zzsucai.com/tag/8737.html" title="微信小程序,表单验证," target="_blank">微信小程序,表单验证,</a></div></div><div class="google-ad"><a href="/vip.html" target="_blank" title="VIP会员"><img src="https://img.zzsucai.com/202007/09/200709103447367.jpg"></a></div><div class="project-content"><div class="thumbile"><a class="nbtn nbtn-sc" id="favoriteBtn" onclick="favorite('15371')"><i class="fa fa-heart-o"></i> 收藏</a></div><div class="intsCon">      积分说明：注册即送10金币，每日签到可获得更多金币，成为VIP会员可免金币下载！ 
      <a href="https://www.zzsucai.com/member/index/recharge_index.html" target="_blank">充值积分</a><a href="https://www.zzsucai.com/vip.html" target="_blank">充值会员</a><a href="https://www.zzsucai.com/help/jifen.html" target="_blank">更多说明»</a></div></div><div class="project-content project-top-border"><link rel="stylesheet" type="text/css" href="https://www.zzsucai.com/static/js/share/share.min.css"><script src="https://www.zzsucai.com/static/js/share/jquery.share.min.js"></script><div id="share-1" data-weibo-title="2022微信小程序表单验证错误提示效果" data-qq-title="2022微信小程序表单验证错误提示效果"></div><script>    $('#share-1').share({sites: ['weibo','qq','qzone','wechat','douban']});
    </script></div><div class="project-content project-top-border"><div class="social"><div class="social-inner"><a class="social-left" href="https://www.zzsucai.com/biancheng/15370.html"><i class="fa fa-chevron-left" aria-hidden="true"></i><span>2022nodejs开发微信小程序实现密码的加密<span></span></span></a><div class="social-round"><div class="social-round-border"><span></span></div><i onclick="Backtop();" class="social-round-inner fa fa-arrow-up" aria-hidden="true"></i></div><a class="social-right" href="https://www.zzsucai.com/biancheng/15372.html"><span>2022微信小程序中picker组件的简单用法</span><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></div></div><div class="in2-tit"><h4><i class="fa fa-comments-o" aria-hidden="true"></i> 讨论这个素材（0）<span class="z14">回答他人问题或分享使用心得奖励金币</span></h4></div><div class="in2" id="meglist"><a name="anchor"></a><p id="no-m-data">〒_〒 居然一个评论都没有……</p></div><div class="message in2"><div class="alert-success" id="err"></div><textarea id="body" class="textarea" style="height:120px; width:100%;" placeholder="您有什么想法要说的吗？帮助他人、分享技术会获得积分奖励！">
表情  文明上网，理性发言！  发表评论