首页
所有分类
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 使用手册(三)
Sep 23 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
JavaScript中import用法总结
Jan 20 Javascript
Vue基础配置讲解
Nov 29 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
扫雷(1) 路由(1) 单向链表(1) 抽象类(1) Date(1) 接口(1) Scheduled(1) 乱码(3) 模拟登录(1) router(1)
You might like
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
pyside写ui界面入门示例
2014/01/22 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
python 实现汉诺塔游戏
2020/11/28 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
应聘自荐信
2013/12/14 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
勿忘国耻9.18演讲稿（经典篇）
2014/09/14 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA