(编辑:jimmy 日期: 2024/10/31 浏览:2)
本文实例为大家分享了小程序表单认证布局及验证的具体代码,供大家参考,具体内容如下
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="/UploadFiles/2021-04-02/upimg.png">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) { }, })为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。