微信小程序 实现注册、登录功能（表单校验、错误提示）

最新推荐文章于 2024-10-01 19:52:33 发布
最新推荐文章于 2024-10-01 19:52:33 发布
阅读量1.6w 收藏 125
点赞数 18
分类专栏： 微信小程序专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/90406900
版权

我的qq 2038373094

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

口说无凭，实现效果如下

前端 部分

 

注册功能

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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">

        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                用户名
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input name="input" placeholder="请输入用户名" bindinput="username"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">

        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                手机号码
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input name="input" placeholder="请输入手机号码" bindinput="tell"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">
        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                密码
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input placeholder="设置密码" password="true" bindinput="password"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">

        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                确认密码
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input placeholder="设置密码" password="true" bindinput="rpassword"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">

        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button type="primary" bindtap="submitHandler">注册</button>
              </view>
            </view>
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button bindtap="ureg">用户登录</button>
              </view>
            </view>
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button bindtap="treg">教师注册</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

2、js文件

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Page({
  data: {
    name: "",
    pass: "",
    rpass: "",
    tell: "",
    isname: false,
    istell: false,
    ispass: false
  },
  treg: function treg() {
    wx.navigateTo({
      url: "./../teacher/tregdit"
    });
  },
  ureg: function ureg() {
    wx.navigateTo({
      url: "./../ulogin/ulogin"
    });
  },
  tell: function tell(e) {
    this.setData({ tell: e.detail.value });
  },
  username: function username(e) {
    this.setData({ name: e.detail.value });
  },
  password: function password(e) {
    this.setData({ pass: e.detail.value });
  },
  rpassword: function rpassword(e) {
    this.setData({ rpass: e.detail.value });
  },
  submitHandler: function submitHandler() {
    var that = this;
    if (that.data.name == "") {
      wx.showModal({
        title: "错误",
        content: "用户名不能为空"
      });
      that.isname = false;
    } else {
      that.isname = true;
    }
    if (that.data.pass != that.data.rpass || that.data.pass == "" || that.data.rpass == "") {
      wx.showModal({
        title: "错误",
        content: "两次密码输入不一致"
      });
      that.ispass = false;
    } else {
      that.ispass = true;
    }
    if (that.data.tell.length != 11) {
      wx.showModal({
        title: "错误",
        content: "手机格式有误"
      });
      that.istell = false;
    } else {
      that.istell = true;
    }

    if (that.istell && that.ispass && that.isname) {
      // 提交
      wx.request({
        url: "http://localhost:8080/Teacher/uregedit.action", //接口地址
        data: {
          username: that.data.name,
          password: that.data.pass,
          tell: that.data.tell
        },
        method: "get",
        header: {
          "content-type": "application/json"
        },
        success: function success(res) {
          //页面跳转
          wx.navigateTo({
            url: "./../tlogin/tlogin"
          });
          //页面跳转
        }
      });
      // 提交
    }
  }
});

3、wxss文件


.frm {
  margin-top: 200rpx;
}

 

登录功能

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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">
        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                用户名
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input name="input" placeholder="请输入用户名" bindinput="username"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">
        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                密码
              </view>
            </view>
            <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
              <view class="ui-col-content align-center valign-middle">
                <input placeholder="设置密码" password="true" bindinput="password"></input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <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 ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
        <view class="ui-col-content align-center valign-middle">

        </view>
      </view>
      <view class="ui-col" style="">
        <view class="ui-col-content">
          <view class="ui-row" style="height:40px;">
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button type="primary" bindtap="submitHandler">登录</button>
              </view>
            </view>
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button bindtap="ureg">用户注册</button>
              </view>
            </view>
            <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" style="flex: 0 0 33.33333333333333%;">
              <view class="ui-col-content align-center valign-middle">
                <button bindtap="tlogin">老师登录</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

2、js文件

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Page({
  data: {
    name: "",
    pass: "",
    isname: false,
    ispass: false
  },
  ureg: function ureg() {
    wx.navigateTo({
      url: "./../user/reg"
    });
  },
  tlogin: function tlogin() {
    wx.navigateTo({
      url: "./../tlogin/tlogin"
    });
  },
  username: function username(e) {
    this.setData({ name: e.detail.value });
  },
  password: function password(e) {
    this.setData({ pass: e.detail.value });
  },
  submitHandler: function submitHandler() {
    var that = this;
    if (that.data.name == "") {
      wx.showModal({
        title: "错误",
        content: "用户名不能为空"
      });
      that.isname = false;
    } else {
      that.isname = true;
    }
    if (that.data.pass == "") {
      wx.showModal({
        title: "错误",
        content: "密码不能为空"
      });
      that.ispass = false;
    } else {
      that.ispass = true;
    }
    if (that.ispass && that.isname) {
      // 提交
      wx.request({
        url: "http://localhost:8080/Teacher/ulogin.action", //接口地址
        data: {
          username: that.data.name,
          password: that.data.pass
        },
        method: "get",
        header: {
          "content-type": "application/json"
        },
        success: function success(res) {
          var info = res.data;
          if (info == "fail") {
            wx.showModal({
              title: "错误",
              content: "用户名或者密码输入不正确"
            });
          } else {
            //存储数据
            // 同步接口立即写入
            wx.setStorageSync("uname", that.data.name + "");
            wx.setStorageSync("indentity", "user");
            //页面跳转
            //页面跳转
            wx.switchTab({
              url: "/pages/center/center"
            });
            console.log("页面跳转111");
          }
        }
      });
      // 提交
    }
  }
});

3、wxss文件

.frm {
  margin-top: 200rpx;
}

 

我的后端是用java的ssh框架实现的

package cn.com.service;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import com.opensymphony.xwork2.ModelDriven;

import cn.com.bean.User;

@Repository(value = "ulogin")
@Scope("prototype")
public class Ulogin implements ModelDriven<User> {
	@Autowired
	private SessionFactory sf;
	@Autowired
	private User u;

	// 注册功能
	@Transactional
	public String regedit() {
		Session session = sf.getCurrentSession();
		session.save(u);
		return null;
	}

	// 登录功能
	@Transactional
	public String login() {
		Session session = sf.getCurrentSession();
		String sql = "from User where username=? and password=?";
		Query query = session.createQuery(sql);
		query.setString(0, u.getUsername());
		query.setString(1, u.getPassword());
		User uu = (User) query.uniqueResult();
		String info = null;
		if (uu != null) {
			info = "success";
		} else {
			info = "fail";
		}
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		try {
			response.getWriter().write(info);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return u;
	}
}

 

qq_37591637
关注
专栏目录
微信小程序-表单注册实例（自定义缓存数据测试）
qq_40678503的博客
04-16 643
login.wxml <form bindsubmit="formSubmit" bindreset="formReset"> <view class="content"> <view class='user-input'> <input placeholder='请设置4-20位用户名' class='user' placeholder-s...
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
微信小程序实现注册登录功能(表单校验、错误提示)
10-15
主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍，需要的朋友可以参考下
微信小程序如何实现登陆和注册功能?
php优质创造者
07-14 6743
👨‍💻。
微信小程序中的 `＜block＞` 元素：高效渲染与结构清晰的利器
最新发布
everfoot的博客
10-01 1731
总的来说，是否使用<block>取决于具体的应用场景。如果你的循环不需要额外的样式或者DOM结构，那么使用<block>会更加合适。如果循环项需要独立的样式或者事件绑定，那么使用<view>可能会更加合适。通过合理使用<block>，你可以保持WXML结构的清晰和简洁，同时避免不必要的DOM层级和性能开销。在微信小程序的开发中，掌握<block>的用法和优势将帮助你更高效地构建和维护你的应用。
微信小程序的登录流程——代码详解
aaa123aaasqw的博客
04-04 1476
3、一般在项目开发，开发者服务器也会对用户的登录态做过期限制，所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。回传到开发者服务器（就是请求开发者服务器的登录接口，通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等）。4、无论是微信服务器过期了还是开发者服务器登录态过期了，都要像首次登录那样开始三步骤。小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。
微信小程序登陆注册功能的实现代码
12-13
我们在开发小程序时，难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能，但是这个只能获取用户的头像和昵称，我们该怎么样来实现小程序账号密码的注册和登陆呢，今天就来手把手的带大家学习小程序登陆注册功能的开发。 老规矩，先看效果图 通过上图可以看到我们主要实现了以下功能1,账号密码登陆2，账号密码注册3，退出登陆下面我们就来看下具体实现一，原理讲解 因为我们账号密码的注册，就是把用户设置的账号密码存到数据库里，登陆也是从数据库里取账号和密码来校验。所以我们必须要有数据库。如果用传统的数据库来做，比较麻烦，所以我们今天就借助小程序云开发数据库来做。 二，编写一个云开发的小程序 云开发
微信小程序——登录注册的简单实现
m0_64813192的博客
03-17 6868
微信小程序——登录注册的简单实现
小程序登陆注册功能的实现
weixin_41513488的博客
09-05 387
注册功能：在小程序前端页面上，添加注册功能的表单，包括账号和密码的输入框。登录功能：在小程序前端页面上，添加登录功能的表单，包括账号和密码的输入框。需要注意的是，小程序的登录注册功能涉及到用户隐私信息的处理，需要遵守相关的法律法规和用户隐私协议，确保用户信息的安全性和合法性。用户权限管理：在后端接口中，可以使用Token或Session等方式生成并返回给小程序前端，用于后续请求的身份验证和权限控制。存储用户信息：在后端接口中，注册成功后将用户信息保存到数据库中，登录成功后将用户信息返回给小程序前端页面。
2024年最全零基础学小程序005---小程序登陆注册功能实现，图文详解
2401_84585372的博客
05-08 1226
对于面试还是要好好准备的，尤其是有些问题还是很容易挖坑的，例如你为什么离开现在的公司（你当然不应该抱怨现在的公司有哪些不好的地方，更多的应该表明自己想要寻找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等）Java面试精选题、架构实战文档你的支持，我的动力；祝各位前程似锦，offer不断！本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录。
微信小程序表单验证form提交错误提示效果
10-18
微信小程序表单验证及错误提示效果是微信小程序开发中的一个重要环节。本文将详细介绍微信小程序表单验证与提交时，如何设计错误提示效果以提升用户体验，以下是详细介绍。 ### 微信小程序表单验证原理 微信小程序...
微信小程序表单验证错误提示效果
08-30
主要为大家详细介绍了微信小程序表单验证错误提示效果，点击确认发布不能为空错误提示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现登陆界面UI
01-08
本项目木代码只有微信小程序的页面,不包含后台的实现.包括用户名和密码文本和输入框,以及按钮的样式实现.
微信小程序 教程之注册页面
09-01
主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下
微信小程序——登录页面
12-29
微信小程序登录界面，有自动登录选项，忘记密码及注册，登录表单验证等
微信小程序form表单Cannot read property ‘detail‘ of undefined原因之一
wlzzxm的博客
09-17 969
微信小程序form 表单可能会遇到的detail undefined问题
【微信小程序】表单验证：结合服务端API，实现小程序注册及登录等功能
web-Danli的博客
11-15 1415
前言： 此篇博客主要分享：微信小程序是怎样与后端服务器联通，通过服务端API，表单输入信息之后可以提交给服务器。并且加以用户的各种数据进行合法验证的功能。 说明：本服务器代码用的是PHP服务器及MySQL数据库。 一、用户注册 // pages/register/register.js Page({ /** * 页面的初始数据 */ data: { date:"2010-09-26", items:[{name:"篮球",value:"篮球"}, {name:"
【微信小程序-原生开发】实用教程12 - 注册页（含获取用户微信昵称，原生form的表单提交，t-result 的使用）
朝阳39的博客
03-03 433
注册页（含获取用户微信昵称，原生form的表单提交，t-result 的使用）
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_37591637

请给我持续更新的动力~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值