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

本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码，供大家参考，具体内容如下

表单验证，点击确认发布不能为空错误提示。

以下是效果图：

代码如下：

WXML:

view class=' ad _ popError ' wx : if=' { { popErrorMsg } } ' { { popErrorMsg } }/view class=' ad _ popFt ' form bind submit=' goDetail ' text area class=' ad _ popArea ' bind input=' comment tfn ' focus=' { { ispooppen } } ' placeholder='请输入留言内容占位符样式=' color : # ccccccname=' text area '/view class=' ad _ popCout ' text class=' one _ star '你还可以输入/text text class='one_stars {{！小费？危险： ' ' } } ' { { comment txt count } }/text text class=' one _ star '字/text/view button class=' informBtn ' form-type=' submit '确认发布/按钮/表单/视图viewWXSS:

第{ background: # f4f4f4页；}.ad _ popHd { height: 76rpx线高： 76rpxfont-size : 32 rpx文本对齐：中心；边框-底部： 1px实心# cdd1 cdpadd : 0 20 rpxcolor : # 202120 }。ad _ popFt { margin: 20rpx边距-top : 50 rpx；}.ad _ popArea { width: 708rpx高度height :400 rpx font-size :30 rpx；padding: 20rpx盒子尺寸：边框盒子；-webkit-box-sizing:边框-盒子；线高： 40 rpx颜色： # 333背景# fff}。ad _ PopCout { color : # 969899 font-size : 24 rpx；文本对齐：右侧；线高： 58 rpxpadding: 0 20rpx }。informBtn {后台： # 09bb 07color : # ffffont-size : 34 rpx；页边距-顶部： 38 rpx高度： 88rpx}。one _ stars { color: # 999 }。one _ star { font-size : 20 rpxcolor: # 999}。危险{ color: # f64400}。ad _ pop错误{背景： # de 352dcolor : # fffh three : 58 rpx线高： 58 rpxfont-size : 24 rpx文本对齐：中心；绝对位置：左： 0；top : 0；宽度： 100%;z索引：3;}JS:

//page/informlavemsg/informlavemsg。js页面({/* * *页面的初始数据*/data: { }，//确认发布godetail :函数(e){ setTimeout(()={ var subValue=e . detail。价值。textarea控制台。log(SupValue)if(SupValue==null | | SupValue==' '){ console。日志('不能为空)this.setData({ popErrorMsg: '发布的留言内容不能为空' } );这个。ohshitfadeout()；返回；} },100) },//定时器提示框3秒消失ohShitfadeOut(){ var fade outimeout=setTimeout(()={ this。setdata({ poperrorsmsg : ' ' })；cleartime out(淡出超时)；}, 3000);}, })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。