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

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

以下是效果图:

代码如下:

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-style="color:#cccccc;" 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{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;}

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

}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现表单校验功能

    小程序SDK版本 1.4 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一.原因如下: 表单组件在数量上达到11个,居各类组件之首.当然幸运的是,并不是所有的都需要校验. 而这些组件操作方式多样,可分为滑动.(多行)输入.点击.点击+滑动. 即使是同一个组件,因为业务场景不同就会有不同的校验规则. 更麻烦的是,这些组件之间经常还会联动或者关联校验. - 但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录.注册.新增.编辑

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • 微信小程序 PHP后端form表单提交实例详解

    微信小程序 PHP后端form表单 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序. 2.昨天写了登录注册.忘记密码功能,他们实质上都是一个表单提交操作.因此就拿注册功能来写这个例子. 3.目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于

  • 微信小程序 表单Form实例详解(附源码)

    微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件

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

    微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="goDetail" > <textarea

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

    本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码,供大家参考,具体内容如下 表单验证,点击确认发布不能为空错误提示. 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="

  • 微信小程序表单验证插件WxValidate的二次封装功能(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2

  • 微信小程序表单验证功能完整实例

    本文实例讲述了微信小程序表单验证功能.分享给大家供大家参考,具体如下: Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名"

  • 微信小程序表单验证WxValidate的使用

    效果图GIF git地址:WxValidate 使用 import WxValidate from '../../utils/WxValidate'; Page({ data: { basicInfo: { tel: '', post: '', weChat: '', specialPlane: '', email: '', intro: '' } }, onLoad() { this.initValidate(); }, initValidate() { const rules = { tel

  • Asp.net Mvc表单验证气泡提示效果

    本文实例为大家分享了Asp.net Mvc表单验证的制作代码,供大家参考,具体内容如下 将ASP.NET MVC或ASP.NET Core MVC的表单验证改成气泡提示: //新建一个js文件(如:jquery.validate.Bubble.js),在所有要验证的页面引用 (function ($) { $("form .field-validation-valid,form .field-validation-error") .each(function () { var tip

  • 微信小程序表单弹窗实例

    开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理,然后这次发布的这套源码就是解决这个问题! WXML代码如何: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bin

  • 小程序表单认证布局及验证详解

    本文实例为大家分享了小程序表单认证布局及验证的具体代码,供大家参考,具体内容如下 tset.wxml <view class='form'> <view class='content'> <view class='left'>姓名:</view> <view class='right'> <view class='right-left'> <input placeholder='请输入真实姓名' bindinput='getNa

  • 微信小程序实现验证码获取倒计时效果

    本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获

  • 详解微信小程序用定时器实现倒计时效果

    平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='

随机推荐