本文实例为大家分享了小程序表单认证布局及验证的具体代码,供大家参考,具体内容如下
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) { }, })为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7
- 雨果唱片-三角琴《俄罗斯民间音乐系列-梁祝(中国名曲)》wav
- 《塞尔达传说:智慧的再现》新实机!无之世界介绍