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

微信小程序表单验证，点击确认发布不能为空错误提示，具体内容如下

以下是效果图：

{{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><p></p><p>WXSS:<br/></p><p class="jb51code"></p><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><p></p><p>JS:<br/></p><p class="jb51code"></p><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><p></p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！</p><p>    </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Express-js--path_bcc470c3.html" target="_blank" title="Express.js"path必须是绝对路径或指定root到res.sendFile"错误">Express.js"path必须是绝对路径或指定root到res.sendFile"错误</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Express.js"path必须是绝对路径或指定root到res.sendFile"错误》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Express-js--path_bcc470c3.html" target="_blank" title="Express.js"path必须是绝对路径或指定root到res.sendFile"错误">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/windowsphone8-1C_9a90627b.html" target="_blank" title="windows phone 8.1 ComboBox在项目数量更多时显示多个项目">windows phone 8.1 ComboBox在项目数量更多时显示多个项目</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《windowsphone8.1ComboBox在项目数量更多时显示多个项目》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/windowsphone8-1C_9a90627b.html" target="_blank" title="windows phone 8.1 ComboBox在项目数量更多时显示多个项目">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZhenDuiDuoGeZuoY_8f87d619.html" target="_blank" title="针对多个作业的Spring Batch JUnit测试">针对多个作业的Spring Batch JUnit测试</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《针对多个作业的SpringBatchJUnit测试》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZhenDuiDuoGeZuoY_8f87d619.html" target="_blank" title="针对多个作业的Spring Batch JUnit测试">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_laravel5_e21c9d2f.html" target="_blank" title="如何在laravel 5.1中使用url(路由)传递多个参数">如何在laravel 5.1中使用url(路由)传递多个参数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在laravel5.1中使用url(路由)传递多个参数》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_laravel5_e21c9d2f.html" target="_blank" title="如何在laravel 5.1中使用url(路由)传递多个参数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WuFaHuoQuPeiZhiW_b56c7887.html" target="_blank" title="无法获取配置文件(google-services.json)">无法获取配置文件(google-services.json)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《无法获取配置文件(google-services.json)》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/WuFaHuoQuPeiZhiW_b56c7887.html" target="_blank" title="无法获取配置文件(google-services.json)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Yong_redis_ShuiP_3c296713.html" target="_blank" title="用redis水平缩放socket.io">用redis水平缩放socket.io</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《用redis水平缩放socket.io》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Yong_redis_ShuiP_3c296713.html" target="_blank" title="用redis水平缩放socket.io">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Spyder_WuFaZai_W_22e9d295.html" target="_blank" title="Spyder无法在Windows 10上的Anaconda虚拟环境中运行">Spyder无法在Windows 10上的Anaconda虚拟环境中运行</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Spyder无法在Windows10上的Anaconda虚拟环境中运行》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Spyder_WuFaZai_W_22e9d295.html" target="_blank" title="Spyder无法在Windows 10上的Anaconda虚拟环境中运行">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeYiBianChengF_c46b7d0b.html" target="_blank" title="如何以编程方式禁用Windows 10平板电脑屏幕的边缘滑动手势？">如何以编程方式禁用Windows 10平板电脑屏幕的边缘滑动手势？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何以编程方式禁用Windows10平板电脑屏幕的边缘滑动手势？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeYiBianChengF_c46b7d0b.html" target="_blank" title="如何以编程方式禁用Windows 10平板电脑屏幕的边缘滑动手势？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/GengGaiDaoHangTi_07a04563.html" target="_blank" title="更改导航条目项目语言">更改导航条目项目语言</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《更改导航条目项目语言》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/GengGaiDaoHangTi_07a04563.html" target="_blank" title="更改导航条目项目语言">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/SamsungSHealth_S_3a142216.html" target="_blank" title="Samsung S Health是独家三星API还是使用Google Fit？">Samsung S Health是独家三星API还是使用Google Fit？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《SamsungSHealth是独家三星API还是使用GoogleFit？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/SamsungSHealth_S_3a142216.html" target="_blank" title="Samsung S Health是独家三星API还是使用Google Fit？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_javascri_550e497a.html" target="_blank" title="如何在javascript中字符串的每个单词的首字母大写？">如何在javascript中字符串的每个单词的首字母大写？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在javascript中字符串的每个单词的首字母大写？》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_javascri_550e497a.html" target="_blank" title="如何在javascript中字符串的每个单词的首字母大写？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/--39;function--3_8bb025ec.html" target="_blank" title="'function'对象没有属性'as_view'">'function'对象没有属性'as_view'</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《'function'对象没有属性'as_view'》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/--39;function--3_8bb025ec.html" target="_blank" title="'function'对象没有属性'as_view'">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/R_ZhongDe_OR_Bia_5789bd46.html" target="_blank" title="R中的OR表达式">R中的OR表达式</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《R中的OR表达式》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/R_ZhongDe_OR_Bia_5789bd46.html" target="_blank" title="R中的OR表达式">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/AndroidRealm_DaW_82064fe7.html" target="_blank" title="Android Realm大文件大小">Android Realm大文件大小</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《AndroidRealm大文件大小》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/AndroidRealm_DaW_82064fe7.html" target="_blank" title="Android Realm大文件大小">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMeWoBuNeng_22c08f7f.html" target="_blank" title="为什么我不能在Haskell中的连接函数(++)上进行模式匹配？">为什么我不能在Haskell中的连接函数(++)上进行模式匹配？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么我不能在Haskell中的连接函数(++)上进行模式匹配？》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMeWoBuNeng_22c08f7f.html" target="_blank" title="为什么我不能在Haskell中的连接函数(++)上进行模式匹配？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/SeleniumGrid-_Zh_79e8c83f.html" target="_blank" title="Selenium Grid +转发新会话时出错，VM空池用于设置功能">Selenium Grid +转发新会话时出错，VM空池用于设置功能</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《SeleniumGrid+转发新会话时出错，VM空池用于设置功能》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/SeleniumGrid-_Zh_79e8c83f.html" target="_blank" title="Selenium Grid +转发新会话时出错，VM空池用于设置功能">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Flask-restfulAPI_eedd252c.html" target="_blank" title="Flask-restful API授权.访问装饰器内的current_identity">Flask-restful API授权.访问装饰器内的current_identity</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Flask-restfulAPI授权.访问装饰器内的current_identity》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Flask-restfulAPI_eedd252c.html" target="_blank" title="Flask-restful API授权.访问装饰器内的current_identity">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_AnkoDSL__bc3e6e9f.html" target="_blank" title="如何在Anko DSL中引用其他视图？">如何在Anko DSL中引用其他视图？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在AnkoDSL中引用其他视图？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_AnkoDSL__bc3e6e9f.html" target="_blank" title="如何在Anko DSL中引用其他视图？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/MeiYouCong_Prest_d5ee07ec.html" target="_blank" title="没有从Prestashop 1.6.1.1网站收到管理员订单确认电子邮件">没有从Prestashop 1.6.1.1网站收到管理员订单确认电子邮件</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《没有从Prestashop1.6.1.1网站收到管理员订单确认电子邮件》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/MeiYouCong_Prest_d5ee07ec.html" target="_blank" title="没有从Prestashop 1.6.1.1网站收到管理员订单确认电子邮件">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Python3_ZhongDeZ_750acbe1.html" target="_blank" title="Python 3中的整数除法 - 带有负数的奇怪结果">Python 3中的整数除法 - 带有负数的奇怪结果</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Python3中的整数除法-带有负数的奇怪结果》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Python3_ZhongDeZ_750acbe1.html" target="_blank" title="Python 3中的整数除法 - 带有负数的奇怪结果">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了