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

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) {

  },

})