微信小程序

微信小程序表单提交判断

2020-06-09  本文已影响0人  一只菜鸟正在脱毛
image.png

1、WXML

    <!-- 手机号 -->
        <view class="cell-phone">
            <image src="../../images/phone.png" class="icon"></image>
            <input class="phone" maxlength="11" placeholder="输入手机号" type="number" placeholder-style="color:#989898;" bindinput="usernumberInput"></input>
        </view>
        <!-- 手机号 end-->
        <!-- 验证码 -->
        <view class="verification_code">
            <image src="../../images/code.png" class="icon"></image>
            <view class="code_btn">
                <input class="code" placeholder="输入验证码" placeholder-style="color:#989898;" bindinput="codeInput"></input>
                <view class="codebtn" disabled="{{disabled}}" bindtap="getCode">{{codename}}</view>
            </view>
        </view>
        <!-- 验证码 end-->
    </view>
    <!-- 按钮 -->
    <van-button round type="info" block bindtap="loginbtn">登录</van-button>
    <!-- 按钮 end-->

2、JS

 data: {
    usernumber: "", //手机号
    code: "", //验证码
    codename: '获取验证码',
    iscode: null //用于存放验证码接口里获取到的code

  },
// 获取input输入框手机号码的值
  usernumberInput: function (event) {
    this.setData({
      usernumber: event.detail.value
    })
    // console.log(event.detail.value)
  },
  // 获取input输入框验证码的值
  codeInput: function (event) {
    code: event.detail.value
  },
 // 获取验证码调用方法
  getcode: function () {
    var _this = this
    var numberReg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
    if (this.data.usernumber == "") {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1000
      })
      return false
    } else if (!numberReg.test(this.data.usernumber)) {
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 1000
      })
      return false
    } else {
      wx.request({
        url: '',
        data: {},
        // header: {'content-type':'application/json'},
        // method: 'GET',
        // dataType: 'json',
        // responseType: 'text',
        success: (result) => {
          console.log(result.data.data)
          _this.setData({
            iscode: result.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)
        },
        fail: () => {},
        complete: () => {}
      });
    }

  },
  //获取验证码
  getCode() {
    this.getcode() //写入验证码的时候先判断手机号是否填写正确
    var _this = this
    _this.setData({
      disabled: true
    })
  },
 //提交表单
  loginbtn: function () {
    var numberReg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
    app.globalData.userInfo = {
      usernumber: this.data.usernumber,
      code: this.data.code
    }
    if (this.data.usernumber == "") {
      wx.showToast({
        title: "手机号不能为空",
        icon: 'none',
        duration: 1000
      })
      return false
    } else if (!numberReg.test(this.data.usernumber)) {
      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.usernumber);
      wx.redirectTo({
        url: '../index/index',

      });
    }

  },
上一篇下一篇

猜你喜欢

热点阅读