本文例項為大家分享了小程式表單認證佈局及驗證的具體程式碼，供大家參考，具體內容如下

tset.wxml

<view class='form'>
<view class='content'>
 <view class='left'>姓名：</view>
 <view class='right'>
  <view class='right-left'>
   <input placeholder='請輸入真實姓名' bindinput='getNameValue' value='{{name}}' />
  </view>  
 </view>
</view>
<view class='content'>
 <view class='left'>手機號：</view>
 <view class='right'>
  <view class='right-left'>
  <input placeholder='請輸入手機號' bindinput='getPhoneValue' value='{{phone}}' />
  </view> 
 </view>
</view>
<view class='content'>
 <view class='left'>驗證碼：</view>
 <view class='right'>
  <view class='right-left'>
 <input placeholder='請輸入驗證碼' bindinput='getCodeValue' value='{[code]}' />
  </view>
  <view class='right-right'>
   <button class='btn'>驗證碼</button>
  </view>
 </view>
</view>
<!-- wx:if 和wx:else要緊緊在一起 -->
 <view wx:if='{{upimg}}' class='upimage'>
  <image class='upimg' src='{{upimg}}'></image>
 </view>
 <view wx:else>
  <view class="upimage" catchtap='uploadimgurl'>
   <view class='upimage-tips'>
    <image class="add" src="/static/images/index/upimg.png"> </image>
   </view>
   <view class='upimage-tips'>
    <text>點選上傳營業執照</text>
   </view>
  </view>
 </view>
 <button class='changeBtn' bindtap='save'>提交認證資料</button>
</view>

test.wxss

page {
 width: 100%;
 height: 100%;
}
 
.content {
 width: 95%;
 height: 80rpx;
 margin: 0 auto;
 border-bottom: 1rpx solid gray;
 margin-top: 5%; 
}
 
.left {
 width: 20%;
 height: 80rpx;
 float: left;
 text-align: left;
 line-height: 80rpx;
 font-size: 30rpx;
}
 
.right {
 width: 80%;
 height: 80rpx;
  float: right;
 text-align: left;
 line-height: 80rpx;
}
 
.right-left input {
 float: left;
 text-align: left;
 height: 80rpx;
}
 
.right-right {
 width: 30%;
 float: right;
 height: 80rpx;
}
 
.btn {
 height: 80rpx;
 font-size: 28rpx;
border: 1rpx solid greenyellow;
 
}
.upimage {
 background-color: #f2f2f2;
 border: 1rpx solid #ccc;
 width: 80%;
 /* margin-top: 10%; */
 height: 300rpx;
 border-radius: 10rpx;
 margin: 50rpx auto;
}
 
.upimg {
 width: 100%;
 height: 300rpx;
}
 
.upimage-tips {
 height: 80rpx;
 line-height: 80px;
 text-align: center;
 margin: 50rpx auto;
}
.upimage-tips text {
 font-size: 30rpx;
 color: darkgray;
}
 
.add {
 width: 80rpx;
 height: 80rpx;
 align-items: center;
 /* position: fixed; */
 margin: 0 auto;
 line-height: 80px;
 text-align: center;
}
.changeBtn {
 width: 100%;
 align-items: center;
 background: #1eb31c;
 color: #fff;
 position: fixed;
 bottom: 0;
 line-height: 100rpx;
 left: 0;
}

驗證必填資訊不能為空

test.js

//logs.js
Page({
 
 /**
 * 頁面的初始資料
 */
 data: {
  name: '',//姓名
  phone: '',//手機號
  code: '',//驗證碼
  iscode: null,//用於存放驗證碼接口裡獲取到的code
  upimg: "",codename: "獲取驗證碼",},//獲取input輸入框的值
 getNameValue: function (e) {
  this.setData({
   name: e.detail.value
  })
 },getPhoneValue: function (e) {
  this.setData({
   phone: e.detail.value
  })
 },getCodeValue: function (e) {
  this.setData({
   code: e.detail.value
  })
 },getCode: function () {
  var a = this.data.phone;
  var _this = this;
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if (this.data.phone == "") {
   wx.showToast({
    title: '手機號不能為空',icon: 'none',duration: 1000
   })
   return false;
  } else if (!myreg.test(this.data.phone)) {
   wx.showToast({
    title: '請輸入正確的手機號',duration: 1000
   })
   return false;
  } else {
   wx.request({
    data: {},'url': 介面地址,success(res) {
     console.log(res.data.data)
     _this.setData({
      iscode: res.data.data
     })
     var num = 61;
     var timer = setInterval(function () {
      num--;
      if (num <= 0) {
       clearInterval(timer);
       _this.setData({
        codename: '重新發送',disabled: false
       })
 
      } else {
       _this.setData({
        codename: num + "s"
       })
      }
     },1000)
    }
   })
  }
 },//獲取驗證碼
 getVerificationCode() {
  this.getCode();
  var _this = this
  _this.setData({
   disabled: true
  })
 },//提交表單資訊
 save: function () {
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if (this.data.name == "") {
   wx.showToast({
    title: '姓名不能為空',duration: 1000
   })
   return false;
  }
  if (this.data.phone == "") {
   wx.showToast({
    title: '手機號不能為空',duration: 1000
   })
   return false;
  }
  if (this.data.code == "") {
   wx.showToast({
    title: '驗證碼不能為空',duration: 1000
   })
   return false;
  } else if (this.data.code != this.data.iscode) {
   wx.showToast({
    title: '驗證碼錯誤',duration: 1000
   })
   return false;
  } else {
   wx.setStorageSync('name',this.data.name);
   wx.setStorageSync('phone',this.data.phone);
   wx.redirectTo({
    url: '../add/add',})
  }
  if (this.data.upimg == "") {
   wx.showToast({
    title: '營業執照不能為空',duration: 1000
   })
   return false;
  }
 },//上傳照片
 uploadimgurl: function () {
  var that = this;
  var upimg = that.data.upimg;
  //選擇照片
  wx.chooseImage({
   success(res) {
    var tempFilePaths = res.tempFilePaths
    that.setData({
     upimg: tempFilePaths,})
   }
  })
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function (options) {
 
 },})

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。