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

网络编程 2021-07-04 15:03www.168986.cn编程入门
这篇文章主要为大家详细介绍了小程序表单认证布局及验证的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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: '请输入正确的手机号',
    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) {
 
 },
 
})

为大家推荐现在关注度比较高的微信小程序教程一篇:长沙网络推广为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by

长沙网络推广|微博营销|长沙seo优化|视频营销|长沙网络营销|微信营销|长沙网站建设|口碑营销|软文营销