【移動應(yīng)用開發(fā)技術(shù)】小程序如何實(shí)現(xiàn)表單驗(yàn)證

【移動應(yīng)用開發(fā)技術(shù)】小程序如何實(shí)現(xiàn)表單驗(yàn)證

在下給大家分享一下小程序如何實(shí)現(xiàn)表單驗(yàn)證，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！微信小程序表單驗(yàn)證，點(diǎn)擊確認(rèn)發(fā)布不能為空錯誤提示，具體內(nèi)容如下以下是效果圖：代碼如下：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="請輸入留言內(nèi)容"

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">確認(rèn)發(fā)布</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({

/**

*

頁面的初始數(shù)據(jù)

*/

data:

{

},

//確認(rèn)發(fā)布

goDetail:function(e){

setTimeout(()=>{

var

subValue

=

e.detail.value.textarea

console.log(subValue)

if

(subValue

==

null

||

subValue

==

"")

{

console.log("不能為空")

this.setData(

{

popErrorMsg:

"發(fā)布的留言內(nèi)容不能為空"

}

);

this.ohShitfadeOut();

return;

}

},100)

},

ohShitfadeOut()

{

var

fadeOutTimeout

=

setTim