【移动应用开发技术】小程序如何实现表单验证

【移动应用开发技术】小程序如何实现表单验证

在下给大家分享一下小程序如何实现表单验证，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！微信小程序表单验证，点击确认发布不能为空错误提示，具体内容如下以下是效果图：代码如下：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

=

setTim