温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何制作表单验证错误提示效果

发布时间:2021-06-29 09:24:12 阅读:122 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要为大家展示了“微信小程序如何制作表单验证错误提示效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何制作表单验证错误提示效果”这篇文章吧。

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

以下是效果图:

微信小程序如何制作表单验证错误提示效果

代码如下:

WXML:

<view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> 
<view class="ad_popFt"> 
<form bindsubmit="goDetail" > 
  <textarea class="ad_popArea" bindinput="commentTxtFn" focus="{{isPopOpen}}" placeholder="请输入留言内容" placeholder- name="textarea" /> 
 <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>

WXSS:

page{background#f4f4f4;} 
.ad_popHd{height76rpx; line-height76rpx; font-size32rpx;text-align: center; border-bottom1px solid #cdd1cdpadding0 20rpx;color#202120;} 
.ad_popFtmargin20rpx ; margin-top50rpx;} 
.ad_popAreawidth708rpx; height:400rpx;font-size:30rpx;padding20rpx; box-sizing: border-box; -webkit-box-sizing: border-box; line-height40rpx; color#333background#fff; } 
.ad_popCoutcolor#969899font-size24rpx; text-align: right; line-height58rpx; padding0 20rpx;} 
.informBtn{background#09bb07;color#fff;font-size34rpx; margin-top38rpx;height88rpx;} 
.one_stars{color#999;} 
.one_star{font-size20rpx;color#999;} 
.dangercolor#f64400;} 
.ad_popErrorbackground#de352dcolor#fffheight58rpx; line-height58rpx; font-size24rpx; text-align: center; position: absolute; left0top0width100%z-index:3;}

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); 
 }, 
 
})

以上是“微信小程序如何制作表单验证错误提示效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×