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


Posted in Javascript onJune 19, 2020

本文实例为大家分享了小程序表单认证布局及验证的具体代码,供大家参考,具体内容如下

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

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

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
小程序实现背景音乐播放和暂停
Jun 19 #Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 #Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
You might like
收音机的保养
2021/03/01 无线电
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python是什么 Python的用处
2020/05/26 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
复古服装:RetroStage
2019/05/10 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
经理助理岗位职责
2014/03/05 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
会计求职简历自我评价
2015/03/10 职场文书
python实现简单的聊天小程序
2021/07/07 Python