首页
所有分类
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 相关文章推荐
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
原生js实现公告滚动效果
Jan 10 Javascript
Three.JS实现三维场景
Dec 30 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 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
UV(1) 进程假死(1) 连接数(1) 弱口令(1) 访问日志(2) PV(1) jenkins(1) 线程(1) ipv6(1) 内存(1)
You might like
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
vue组件实例解析
2017/01/10 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python实现ATM系统
2020/02/17 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python Timer 类使用介绍
2020/12/28 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
施华洛世奇德国官网：SWAROVSKI德国
2017/02/01 全球购物
爱他美官方海外旗舰店：Aptamil奶粉
2017/12/22 全球购物
高三自我鉴定范文
2013/10/19 职场文书
导游的职业规划书范文
2013/12/27 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
楚门的世界观后感
2015/06/03 职场文书