【微信小程序 登录注册】

本文主要是介绍【微信小程序 登录注册】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

登录

login.wxml页面

<!-- 用户名 -->
<view>
	<text>用户名</text>
	<input type="text" class="userput" bindinput="getuser"	auto-focus placeholder="请输入用户名"/>
</view>
<!-- 密码 -->
<view>
	<text>密码</text>
	<input type="password" class="pwdput" bindinput="getpwd" auto-focus placeholder="请输入密码"/>
</view>
<button class="btn2" plain type="primary" bindtap="fnsubmit">登录</button>

.userput{
  border: 1px solid #ccc;
}
.pwdput{
  border: 1px solid #ccc;
}

login.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    user: 'admin12',
    pwd: '123456',
    inputUser:'',
    inputPwd:''
  },
  getuser(e) {
  //通过事件源对象来获取用户名输入框的输入的值
    console.log(e.detail.value);
    this.setData({
  //将输入框输入值使用setData实现双向数据绑定赋值给一个inputUser变量
      inputUser: e.detail.value
    })
  },
  getpwd(e) {
   //通过事件源对象来获取密码输入框的输入的值
    console.log(e.detail.value);
    this.setData({
    //将输入框输入值使用setData实现双向数据绑定赋值给一个inputPwd变量
      inputPwd:e.detail.value
    })
  },
  
  // 点击提交与data数据进行匹配
  fnsubmit() {
  //进行判断 如果输入框输入的值与data中给定的值一致则提交成功 密码也一样
    if (this.data.user==this.data.inputUser &&
       this.data.pwd==this.data.inputPwd) {
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
    }else{
    //否则不一致则提交失败
      wx.showToast({
        title: '失败',
        icon: 'error',
        duration: 2000
      })
    }
	//如果输入的用户名和密码的值为空就提示不能为空
    if (this.data.inputUser=="" || this.data.inputPwd=="") {
      wx.showToast({
        title: '不能为空',
        icon: 'error',
        duration: 2000
      })
    }

  },

注册

register.wxml

<view class="reset">
  注册页面
</view>
<view class="flex">
  <text>用户名:</text>
   <input focus placeholder="请输入用户名" type="text" bindinput="getuser"/>
</view>
<view class="flex">
  <text>密码:</text> <input focus placeholder="请输入密码" type="password" bindinput="getpwd"/>
</view>
<view class="flex">
  <text>再次输入密码:</text> <input focus placeholder="请输入密码" type="password" bindinput="getrepwd"/>
</view>
<button plain form-type="submit" type="primary" bindtap="subFn">提交</button>

register.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputUser: '',
    inputPwd: '',
    inputRepwd: ''
  },
  getuser(e) {
    console.log(e.detail.value);
    this.setData({
      inputUser: e.detail.value
    })
  },
  getpwd(e) {
    console.log(e.detail.value);
    this.setData({
      inputPwd: e.detail.value
    })
  },
  getrepwd(e) {
    console.log(e.detail.value);
    this.setData({
      inputRepwd: e.detail.value
    })
  },
  subFn() {
    if (this.data.inputUser == "" || this.data.inputPwd == "" || this.data.inputRepwd == "") {
      wx.showToast({
        title: '输入内容为空',
        icon: 'error',
        duration: 2000
      })
      return;
    }
    if (this.data.inputPwd != this.data.inputRepwd) {
      wx.showToast({
        title: '两次密码不一致',
        icon: 'error',
        duration: 2000
      })
      return;
    }

    const reg = /^[a-zA-Z0-9]{6,}$/
    if (!reg.test(this.data.inputUser) || !reg.test(this.data.inputPwd)) {
      wx.showToast({
        title: '输入格式不正确',
        icon: 'error',
        duration: 2000
      })
      return;
    }

    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })

  },

这篇关于【微信小程序 登录注册】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！