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

这篇文章主要为大家详细介绍了微信小程序表单验证错误提示效果，点击确认发布不能为空错误提示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

以下是效果图：

代码如下：

WXML:

 {{popErrorMsg}}   你还可以输入{{commentTxtCount}}字<button class="informBtn">确认发布</button></pre>
<p>WXSS:</p>
<pre class="brush:css;"> 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>JS:</p>
<pre class="brush:js;"> // 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>
</div>	
<div class="down" id="down">
	<div class="downl">
		<p><b>《微信小程序表单验证错误提示效果.doc》</b></p>
		<p>下载本文的Word格式文档，以方便收藏与打印。</p>
	</div>
	<div class="downr">
		<input type="button" class="dinput" value="导出WORD">
	</div>
	</div>
</div>	
		    
<ul class="ul-list">
<li>   
<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:120px"
     data-ad-client="ca-pub-6278534685681362"
     data-ad-slot="4967365039"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</li>
    <h3 class="sidebar_title indexnew">相关推荐</h3>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/870959.html"><h6>Django-Form表单验证</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/870959.html"><img src="https://www.kunjuke.com/file/css/thumb/8.jpg/280-180.jpg" alt="Django-Form表单验证"></a></div>
        <div class="news-info">
        <p>urls.py文件内容
from app01 import views
urlpatterns = [
    path('fm/', views.fm),
]

views.py文件内容
#表单验证
#引入forms模块
from ...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2024-03-14<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/187270/" rel="tag">fo</a>,<a href="https://kunjuke.com/tag/948/" rel="tag">form</a>,<a href="https://kunjuke.com/tag/425/" rel="tag">验证</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/869659.html"><h6>valgrind 配合 gdb 调试程序</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/869659.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="valgrind 配合 gdb 调试程序"></a></div>
        <div class="news-info">
        <p>在实际研发过程中，可能会遇到过这样的问题：测试通过 valgrind 验证当前代码存在变量未初始化的问题，但仅通过 valgrind 测试报告，研发无法确认具体的应用场景。本文将通过 valgrind 检测并定位程序中变量未初...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-08-16<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/4734/" rel="tag">程序</a>,<a href="https://kunjuke.com/tag/8184/" rel="tag">调试</a>,<a href="https://kunjuke.com/tag/107752/" rel="tag">配合</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/869639.html"><h6>WPF实现类似ChatGPT的逐字打印效果</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/869639.html"><img src="https://www.kunjuke.com/file/css/thumb/10.jpg/280-180.jpg" alt="WPF实现类似ChatGPT的逐字打印效果"></a></div>
        <div class="news-info">
        <p>背景
前一段时间ChatGPT类的应用十分火爆，这类应用在回答用户的问题时逐字打印输出，像极了真人打字回复消息。出于对这个效果的兴趣，决定用WPF模拟这个效果。

真实的ChatGPT逐字输出效果涉及其语言生成模型原...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-08-11<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/44/" rel="tag">效果</a>,<a href="https://kunjuke.com/tag/105731/" rel="tag">类似</a>,<a href="https://kunjuke.com/tag/111400/" rel="tag">逐字</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/869325.html"><h6>纯javascript验证，100行超精简代码。</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/869325.html"><img src="https://www.kunjuke.com/file/css/thumb/10.jpg/280-180.jpg" alt="纯javascript验证，100行超精简代码。"></a></div>
        <div class="news-info">
        <p>这篇文章转自--寒飞，原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949
纯javascript验证库详解
还是坚持一贯的原则，编写任何一个插件的时候不引用其它框架。这样做...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-08-01<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/142/" rel="tag">代码</a>,<a href="https://kunjuke.com/tag/105692/" rel="tag">精简</a>,<a href="https://kunjuke.com/tag/425/" rel="tag">验证</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/868834.html"><h6>Blazor HyBrid在香橙派（Ubuntu Arm）运行的效果</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/868834.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="Blazor HyBrid在香橙派（Ubuntu Arm）运行的效果"></a></div>
        <div class="news-info">
        <p>Blazor HyBrid在香橙派（Ubuntu Arm）运行的效果

准备香橙派一块！当前教程使用的是香橙派5 4G开发板
准备.NET环境
安装.NET Core依赖
sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblt...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-07-30<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/44/" rel="tag">效果</a>,<a href="https://kunjuke.com/tag/11672/" rel="tag">运行</a>,<a href="https://kunjuke.com/tag/173404/" rel="tag">香橙</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/868500.html"><h6>微信小程序来了，小程序都能做些什么</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/868500.html"><img src="https://www.kunjuke.com/file/css/thumb/6.jpg/280-180.jpg" alt="微信小程序来了，小程序都能做些什么"></a></div>
        <div class="news-info">
        <p>2017年的微信大动作就是微信小程序了，到底小程序都能做些什么？这是很多人关注的热点，小程序开发对企业又有什么帮助呢？下面让厦门微信小程序开发公司来为你就分析下。
 
 
 
微信小程序与APP的...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/105658/" rel="tag">来了</a>,<a href="https://kunjuke.com/tag/4734/" rel="tag">程序</a>,<a href="https://kunjuke.com/tag/110055/" rel="tag">都能</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/868245.html"><h6>js验证统一社会信用代码</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/868245.html"><img src="https://www.kunjuke.com/file/css/thumb/1.jpg/280-180.jpg" alt="js验证统一社会信用代码"></a></div>
        <div class="news-info">
        <p>js验证统一社会信用代码
//验证信用代码
function CheckSocialCreditCode(Code) {
   var patrn = /^[0-9A-Z]+$/;
   //18位校验及大写校验
   if ((Code.length != 18) || (patrn.test(Code) == false)) {
     ...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/142/" rel="tag">代码</a>,<a href="https://kunjuke.com/tag/112901/" rel="tag">信用</a>,<a href="https://kunjuke.com/tag/425/" rel="tag">验证</a></span>
		</div>
	</div>
</li>
    <li> 
	<div class="news-tit news-right">
		<a href="https://kunjuke.com/article/868189.html"><h6>重构前VS重构后效果对比</h6></a>
		<div class="pa news-img"><a href="https://kunjuke.com/article/868189.html"><img src="https://www.kunjuke.com/file/css/thumb/8.jpg/280-180.jpg" alt="重构前VS重构后效果对比"></a></div>
        <div class="news-info">
        <p>本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/42554641
学习重构已经一个多月了，虽然不能让代码特别的整洁、高大尚，但是相比之前写的代码，感觉自己进步很大...</p>
        <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/44/" rel="tag">效果</a>,<a href="https://kunjuke.com/tag/5237/" rel="tag">重构</a></span>
		</div>
	</div>
</li>
        
    </ul>				
</div>
<div class="sidebar" id="sidebar">
<div class="right-content" id="sidead">
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-6278534685681362"
     data-ad-slot="4967365039"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="right-content" id="sidead">   
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-6278534685681362"
     data-ad-slot="4967365039"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>	
</div>
<a class="scroll-top" style="display: none;"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
<div class="footer-news">
<div class="links"></div>   
	<p><i class="fa fa-copyright fa-fw"></i>Copyright 2023. <a href="https://www.kunjuke.com/">昆居客</a><b class="cang"> - IT编程,互联网信息技术文档大全!<b></p>
</div><script src="/file/css/all.js"></script>	
<script src="/file/css/tongji.js"></script>
<script src='/file/css/gaoliang/main.js'></script>
<script src='/file/css/gaoliang/prettyprint.js'></script>
<script src="/file/css/FileSaver.js"></script>
<script src="/file/css/jquery.wordexport.js"></script>
<script>
    $(function(){
        $("input[type='button']").click(function(event) {
            $(".content").wordExport('微信小程序表单验证错误提示效果');
        });
    })
</script>
</body>
</html>