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


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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
小程序实现背景音乐播放和暂停
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
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
20个最新的jQuery插件
2012/01/13 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
在centos7中分布式部署pyspider
2017/05/03 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
社区两委对照检查材料
2014/08/23 职场文书
质量保证书怎么写
2015/02/27 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
孙振耀退休感言
2015/08/01 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书