首页
所有分类
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 相关文章推荐
让IE8支持DOM 2（不用框架！）
Dec 31 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
Javascript学习笔记之 对象篇（四） : for in 循环
Jun 24 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
微信小程序登陆注册功能的实现代码
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
请假条(31) 活动总结(790) 感谢信(72) 接收函(23) 寄语(276) 制度(225) 倡议书(159) 保证书(97) 计划书(118) 评语(336)
You might like
php zend 相对路径问题
2009/01/12 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
JavaScript 设计模式 富有表现力的Javascript（一）
2010/05/26 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
英国花园家具中心：Garden Furniture Centre
2017/08/24 全球购物
学生实习介绍信
2014/01/15 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
党员评议自我评价
2015/03/03 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS