小程式表單認證佈局及驗證詳解

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

tset.wxml

  姓名：手機號：驗證碼：驗證碼點選上傳營業執照提交認證資料

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: '請輸入正確的手機號',      icon: 'none',      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: '姓名不能為空',      icon: 'none',      duration: 1000     })     return false;    }    if (this.data.phone == "") {     wx.showToast({      title: '手機號不能為空',      icon: 'none',      duration: 1000     })     return false;    } else if (!myreg.test(this.data.phone)) {     wx.showToast({      title: '請輸入正確的手機號',      icon: 'none',      duration: 1000     })     return false;    }    if (this.data.code == "") {     wx.showToast({      title: '驗證碼不能為空',      icon: 'none',      duration: 1000     })     return false;    } else if (this.data.code != this.data.iscode) {     wx.showToast({      title: '驗證碼錯誤',      icon: 'none',      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: '營業執照不能為空',      icon: 'none',      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) {      },     })