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

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

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

 },

})

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

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

时间: 2020-06-17

微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

详解小程序之简单登录注册表单验证

这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,

微信小程序表单验证错误提示效果

微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="goDetail" > <textarea

微信小程序表单验证WxValidate的使用

效果图GIF git地址:WxValidate 使用 import WxValidate from '../../utils/WxValidate'; Page({ data: { basicInfo: { tel: '', post: '', weChat: '', specialPlane: '', email: '', intro: '' } }, onLoad() { this.initValidate(); }, initValidate() { const rules = { tel

微信小程序表单验证插件WxValidate的二次封装功能(终极版)

微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2

微信小程序表单验证form提交错误提示效果

本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码,供大家参考,具体内容如下 表单验证,点击确认发布不能为空错误提示. 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="

微信小程序表单验证功能完整实例

本文实例讲述了微信小程序表单验证功能.分享给大家供大家参考,具体如下: Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名"

微信小程序手机号码验证功能的实例代码

wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

JS实现的简单表单验证功能完整实例

本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

JS简单表单验证功能完整示例

本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

微信小程序人脸识别功能代码实例

前几天偶然看见一个人脸识别的小程序demo,觉得很有趣下载下来想玩玩,结果只是一个框架而已用不了的,花了点时间完善一下 吐槽一下wx.uploadFile这个接口,真是个大坑,最开始调用时候,我以为它和同期的wx.downloadFile一样,只需要填入必须的参数就可以用,结果还是要配合后台php的 首先,upload这个接口的url和request一样指的是php的路径,而不是download一样文件路径 其次,我在最开始一直没弄懂这个"name"到底应该填什么,上传功能不好用我一直