首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 10, 2019

口说无凭，实现效果如下

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

前端 部分 

注册功能

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;
 }
}

总结

以上所述是小编给大家介绍的微信小程序实现注册登录功能(表单校验、错误提示)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

- Author -

我相信慢思考的力量

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
微信小程序实现签字功能
Dec 23 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 #Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 #Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 #Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序（面向对象思想）
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
说明书(38) 担保书(46) 意向书(73) 检举信(8) 协议书(568) 聘任书(31) 委托书(259) 公证书(45) 竞聘书(31) 承诺书(369)
You might like
第十一节--重载
2006/11/16 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
javascript 写类方式之八
2009/07/05 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
pycharm新建一个python工程步骤
2019/07/16 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
保护环境标语
2014/06/09 职场文书
节约用水的口号
2014/06/20 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
公司要求试用期员工提交“述职报告”，该怎么写？
2019/07/17 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android