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

最新推荐文章于 2024-07-14 08:55:10 发布
最新推荐文章于 2024-07-14 08:55:10 发布
阅读量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
关注
专栏目录
微信小程序开发中的表单提交与数据验证
wx_linying1029的博客
08-13 468
在代码中，我们首先通过bindsubmit属性绑定了表单提交事件submitForm，当用户点击提交按钮时，该事件会触发。在路由中，我们通过req.body获取到表单数据，并进行了与前端相同的数据验证。数据验证指的是在表单提交前，对用户输入的数据进行验证，确保数据的合法性。在表单提交之前，我们通过validateFormData方法对数据进行了简单的验证，但这种验证只是前端验证，不能完全保证数据的合法性。通过对表单数据的前端和后端验证，我们可以确保数据的合法性，并提供友好的错误提示。
微信小程序-表单注册实例（自定义缓存数据测试）
qq_40678503的博客
04-16 630
login.wxml <form bindsubmit="formSubmit" bindreset="formReset"> <view class="content"> <view class='user-input'> <input placeholder='请设置4-20位用户名' class='user' placeholder-s...
微信小程序登陆注册功能的实现代码
12-13
我们在开发小程序时，难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能，但是这个只能获取用户的头像和昵称，我们该怎么样来实现小程序账号密码的注册和登陆呢，今天就来手把手的带大家学习小程序登陆注册功能的开发。 老规矩，先看效果图 通过上图可以看到我们主要实现了以下功能1,账号密码登陆2，账号密码注册3，退出登陆下面我们就来看下具体实现一，原理讲解 因为我们账号密码的注册，就是把用户设置的账号密码存到数据库里，登陆也是从数据库里取账号和密码来校验。所以我们必须要有数据库。如果用传统的数据库来做，比较麻烦，所以我们今天就借助小程序云开发数据库来做。 二，编写一个云开发的小程序 云开发
微信小程序如何实现登陆和注册功能?
最新发布
php优质创造者
07-14 6177
👨‍💻。
微信小程序——登录注册的简单实现
m0_64813192的博客
03-17 6680
微信小程序——登录注册的简单实现
微信小程序实现注册登录功能(表单校验、错误提示)
10-15
主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍，需要的朋友可以参考下
2024年最全零基础学小程序005---小程序登陆注册功能实现，图文详解
2401_84585372的博客
05-08 1168
对于面试还是要好好准备的，尤其是有些问题还是很容易挖坑的，例如你为什么离开现在的公司（你当然不应该抱怨现在的公司有哪些不好的地方，更多的应该表明自己想要寻找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等）Java面试精选题、架构实战文档你的支持，我的动力；祝各位前程似锦，offer不断！本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录。
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
微信小程序表单验证form提交错误提示效果
10-18
微信小程序表单验证及错误提示效果是微信小程序开发中的一个重要环节。本文将详细介绍微信小程序表单验证与提交时，如何设计错误提示效果以提升用户体验，以下是详细介绍。 ### 微信小程序表单验证原理 微信小程序...
微信小程序form表单Cannot read property ‘detail‘ of undefined原因之一
wlzzxm的博客
09-17 949
微信小程序form 表单可能会遇到的detail undefined问题
微信小程序表单验证错误提示效果
08-30
主要为大家详细介绍了微信小程序表单验证错误提示效果，点击确认发布不能为空错误提示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现登陆界面UI
01-08
本项目木代码只有微信小程序的页面,不包含后台的实现.包括用户名和密码文本和输入框,以及按钮的样式实现.
微信小程序 教程之注册页面
09-01
主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下
微信小程序——登录页面
12-29
微信小程序登录界面，有自动登录选项，忘记密码及注册，登录表单验证等
微信小程序例子——使用form表单获取输入框数据
11-07
微信小程序例子——使用form表单获取输入框数据
【微信小程序】表单验证：结合服务端API，实现小程序注册及登录等功能
web-Danli的博客
11-15 1398
前言： 此篇博客主要分享：微信小程序是怎样与后端服务器联通，通过服务端API，表单输入信息之后可以提交给服务器。并且加以用户的各种数据进行合法验证的功能。 说明：本服务器代码用的是PHP服务器及MySQL数据库。 一、用户注册 // pages/register/register.js Page({ /** * 页面的初始数据 */ data: { date:"2010-09-26", items:[{name:"篮球",value:"篮球"}, {name:"
【微信小程序-原生开发】实用教程12 - 注册页（含获取用户微信昵称，原生form的表单提交，t-result 的使用）
朝阳39的博客
03-03 411
注册页（含获取用户微信昵称，原生form的表单提交，t-result 的使用）
【小程序】微信小程序登录/注册页面设计
热门推荐
happydecai的博客
11-01 2万+
界面设计 页面引用了youzan组件进行设计，包括icon,button,tag,toast以及布局 github地址：https://github.com/youzan/zanui-weapp 实现的功能 1.对用户输入的手机号码进行验证，利用正则表达式： var reg = /^1[3|4|5|7|8][0-9]{9}$/ 验证函数： 用户输入错误的手机号码时将会调用toas...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qq_37591637

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

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

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

打赏作者

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

抵扣说明：

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

余额充值