微信小程序如何實現(xiàn)表單驗證提交功能

今天小編給大家分享一下微信小程序如何實現(xiàn)表單驗證提交功能的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

效果圖：

說明：點擊一鍵預(yù)約提交表單時我們需要驗證一些必填項以及它們的格式。微信小程序表單驗證跟vue的input雙向綁定不同，微信小程序只能通過button按鈕提交form表單，然后通過監(jiān)聽表單提交方法去獲取提交的數(shù)據(jù)。

<!-- 表單 -->
<view class="forms">
  <view class="container">
    <image class="bg" src="../../images/formBg.png" mode="aspectFill"></image>
    <view class="title">
      <text class="text">我家裝修需要花多少錢？</text>
      <text class="text">免費快速獲取預(yù)算方案</text>
    </view>
    <form class="" catchsubmit="submitFn">
      <view class="item">
        <text class="text">*</text>
        <picker class="" mode="region" bindchange="bindRegionChange" value="{{region}}">
          <input type="text" name="city" value="{{city}}" placeholder="請選擇房屋所在城市" placeholder-class="input-placeholder" />
        </picker>
      </view>
      <view class="item">
        <text class="text"></text>
        <input type="text" name="area" value="{{area}}" class="weui-input" placeholder="請輸入房屋面積" placeholder-class="input-placeholder" />
      </view>
      <view class="item">
        <text class="text"></text>
        <input type="text" name="name" value="{{name}}" class="weui-input" placeholder="請輸入您的姓名" placeholder-class="input-placeholder" />
      </view>
      <view class="item">
        <text class="text">*</text>
        <input type="text" name="phone" value="{{phone}}" class="weui-input" placeholder="請輸入聯(lián)系電話" placeholder-class="input-placeholder" />
      </view>
      <button class="btn" formType="submit">
        <text>一鍵預(yù)約</text>
        <!-- <image class="img" src="../../images/headglobal.png" mode="aspectFill"></image> -->
      </button>
      <view class="desc">裝企提供免費上門量房服務(wù)、出3套方案供您對比</view>
    </form>
  </view>
</view>

.forms {
    padding: 0 30rpx;

    .container {
        position: relative;
        width: 100%;
        padding: 20rpx;
    }

    .bg {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .title {
        text-align: center;
        margin-bottom: 40rpx;

        .text {
            display: block;
            font-size: 48rpx;
            color: #000;
        }
    }

    .item {
        height: 65rpx;
        background-color: #fff;
        border: solid 1rpx #dddddd;
        border-radius: 10rpx;
        padding: 0 10rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .text {
            color: #ff0000;
            display: inline-block;
            width: 30rpx;
            font-size: 24rpx;
        }

        .weui-input {
            font-size: 28rpx;
        }

        .input-placeholder {
            color: #999;
        }
    }

    .btn {
        width: 100%;
        height: 75rpx;
        background-color: #00a0e9;
        box-shadow: 3rpx 4prx 13rpx 0rpx rgba(93, 200, 249, 0.59);
        border-radius: 6rpx;
        text-align: center;
        line-height: 75rpx;
        margin: 30rpx 0;
        position: relative;

        text {
            color: #fff;
        }
    }

    .desc {
        text-align: center;
        color: #999;
        font-size: 26rpx;
    }    .img {
        position: absolute;
        width: 31rpx;
        height: 47rpx;
        right: 80rpx;
        top: 40rpx;
    }
}

data:{
    city:'',
    area: "",
    name: "",
    phone: "",
    region: ["廣東省", "廣州市", "海珠區(qū)"],
},
// 表單提交
submitFn: function (e) {
  console.log(e);
  let that = this;
  if (e.detail.value.city == "") {
    wx.showToast({
      title: "請選擇房屋所在城市",
      icon: "none",
    });

    return false;
  }

  if (e.detail.value.phone == "") {
    wx.showToast({
      title: "請輸入聯(lián)系電話",
      icon: "none",
    });

    return false;
  }
  // 驗證電話格式
  if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(e.detail.value.phone)) {
    wx.showToast({
      title: "手機號碼有誤",
      duration: 2000,
      icon: "none",
    });

    return false;
  }
},
// 選擇城市
bindRegionChange: function (e) {
  console.log("picker發(fā)送選擇改變，攜帶值為", e.detail.value);
  this.setData({
    city: e.detail.value,
  });
},

以上就是“微信小程序如何實現(xiàn)表單驗證提交功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。