小程序登录/注册页面设计的实现代码

2025-09-08 16:07:56

界面设计

页面引用了youzan组件进行设计，包括icon,button,tag,toast以及布局

github地址：https://github.com/youzan/zanui-weapp

实现的功能

1.对用户输入的手机号码进行验证，利用正则表达式：

var reg = /^1[3|4|5|7|8][0-9]{9}$/

验证函数：

用户输入错误的手机号码时将会调用toast组件提示用户

getVerificationCode: function(e){
  var reg = /^1[3|4|5|7|8][0-9]{9}$/
  var phone = this.data.userPhone
  var flag = reg.test(phone)
  if(flag){
   var that = this
   var code
   this.setData({
    isValated: true
   })
  }
  else{
    Toast({
     message: '请输入正确的手机号',
     selector: '#zan-toast-test'
    });

  }
 },

2.验证图片验证码（暂时为静态数据嘻嘻）

用户输入正确的手机号码后，会显示要求用户输入图片验证码进行验证，验证成功后将会下发短信验证码给用户的手机

// 图片验证码验证
 ValatedCode: function(){
  var code = this.data.valatedCode.toLowerCase()
  if (code == '3n3d') {
   this.setData({
    isValated: false
   })
   Toast({
    message: '验证码已发送',
    selector: '#zan-toast-test'
   });
   this.getCode()
   this.setData({
    disabled: true
   })
  }
  else {
   this.setData({
    isValated: false
   })
   Toast({
    message: '图片验证码输入错误',
    selector: '#zan-toast-test'
   });
  }
 },

3. 实现发送验证码60s倒计时

var interval = null //倒计时函数

data: {
  fun_id:2,
  time: '获取验证码', //倒计时
  currentTime:61,
  userPhone: '',
  isValated: false,
  valatedCode: ''
 },
 getCode: function (options){
  var that = this;
  var currentTime = that.data.currentTime
  interval = setInterval(function () {
   currentTime--;
   that.setData({
    time: '已发送('+currentTime+'s)'
   })
   if (currentTime <= 0) {
    clearInterval(interval)
    that.setData({
     time: '重新发送',
     currentTime:61,
     disabled: false
    })
   }
  }, 1000)
 },

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

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

这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,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,
Java简易登录注册小程序

登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的地方,详见其它博客. 功能介绍:简单的登录注册系统,使用了数据库sqlserver.单例模式.正则表达式以及图形化开发等知识. 1.在登录界面,可以登录或者注册用户. 注册用户界面,按照正则表达式规定的格式要求来输入信息,若有误,则重新输入. 2.点击注册,首先连接SQLserver数据库,连接成功则会判断该用户名是否已经存在,若存在,则给出提示.反之则进行注册. 3.登录界面,点击登录按钮时,首先与数据库
小程序云开发之用户注册登录

本文实例为大家分享了小程序云开发用户注册登录的具体代码,供大家参考,具体内容如下注册界面和文件登录界面和文件这里的UI使用iviewUI 不懂可以看我的另一篇文章IviewUI 先说注册界面 json如下 wxml如下  <view> <i-input bind:change='inputName' maxlength="15" title="账号" autofocu
微信小程序实现登录注册tab切换效果

利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下直接上代码 wxml: <view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登录</text> <text class="{{login?'':'active'}}" catchtap='register'>注册</text> </view>
微信小程序+云开发实现欢迎登录注册

前段时间和同学一起做了一个小程序,用来参加学校的比赛,完成后把项目内容分割一下,贴到博客上面,算是学习记录和总结吧. 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的"云开发"选项. 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 按照微信的说法: 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并
微信小程序登录态和检验注册过没的app.js写法

0.可参考的官方页面获取登录凭证:https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html 检查登录态是否过期: https://developers.weixin.qq.com/miniprogram/dev/api/wx.checkSession.html 备注:你要明白什么是登录态:这里的登录态是微信小程序自己的登录态,我们可以再自己写个登录页面作为自己的登录态,不过为了用户体验良好我直接以微信登录态做为自己的登
Python实现注册、登录小程序功能

主要实现功能 1.用户输入用户名,在用户名文件中查找对应的用户,若无对应用户名则打印输入错误 2.用户名输入正确后,进行密码匹配.输入密码正确则登录成功,否则重新输入. 3.连续输错三次密码则该用户名被锁,退出程序 -------------------------------------------------- 在程序文件夹下建立一个用户名.密码的文件 :user_np.txt和一个用于存放被锁用户名的文件:lock.txt ---------------------------------
小程序登录/注册页面设计的实现代码

界面设计页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局 github地址:https://github.com/youzan/zanui-weapp 实现的功能 1.对用户输入的手机号码进行验证,利用正则表达式: var reg = /^1[3|4|5|7|8][0-9]{9}$/ 验证函数: 用户输入错误的手机号码时将会调用toast组件提示用户 getVerificationCode: function(e){ var reg = /^1[3|4
vue中uni-app 实现小程序登录注册功能

思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u
微信小程序的注册页面包含倒计时验证码、获取用户信息

1.页面展示 2.wxml代码  <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'
微信小程序弹窗禁止页面滚动的实现代码

下面给大家介绍下小程序弹窗禁止页面滚动的效果: 在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove&quo
node.js实现登录注册页面

本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下首先需要新建四个文件一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <
小程序tab实现页面切换

本文实例为大家分享了小程序tab实现页面切换的具体代码,供大家参考,具体内容如下 .wxml <view class='title'> <view class='titleSel' bindtap='titleClick' data-idx='0'> <text>待接收(0)</text> <hr class="{{0 == currentIndex ? 'headerLineSel' : 'hea
微信小程序实现tab页面切换效果

本文实例为大家分享了微信小程序实现tab页面切换的具体代码,供大家参考,具体内容如下 html 页面 <view class="bgwhite"> <scroll-view scroll-x="true"> <view class="width100 row nowrap"> <view class="f32 c666 p-tb-20 p-lr-3
微信小程序实现注册登录功能(表单校验、错误提示)

口说无凭,实现效果如下前端部分注册功能 1.wxml文件 <view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"> <view class="ui-col ui-col-border-right
微信小程序登录与注册功能的实现详解

目录小程序中的登录用户注册用户信息修改总结小程序中的登录在小程序中有一个概念叫openid,这个相当于登录小程序用户的唯一标识,每个微信用户都不同.那要如何拿到用户的唯一标识呢?在微搭低代码中是通过调用系统的api来获取的 let userinfo = await app.utils.getWXContext() 我们通过这行代码的调用来获取到用户的唯一标识,获取到之后我们其他页面也需要使用,那就需要把他存起来.全局变量的作用域是所有页面都可见,所以我们需要在变量中定义一个全局变量叫

小程序登录/注册页面设计的实现代码

相关推荐

随机推荐