微信小程序表单提交判断
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',
});
}
},