小程序表单认证布局及验证详解

本文实例为大家分享了小程序表单认证布局及验证的具体代码，供大家参考，具体内容如下

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%;
 
 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;
 
 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) {
 
 },
 
})

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。