微信小程序实现注册登录功能(表单校验、错误提
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍,需要的朋友可以参考下
口说无凭,实现效果如下
前端 部分
注册功能
1、wxml文件
<view> <view class="frm"> <view class="ui-row ui-row-border- 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- 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- 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- 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- 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" }, suess: function suess(res) { //页面跳转 wx.navigateTo({ url: "./../tlogin/tlogin" }); //页面跳转 } }); // 提交 } } });
3、wxss文件
.frm { margin-: 200rpx; }
登录功能
1、wxml文件
<view> <view class="frm"> <view class="ui-row ui-row-border- 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- 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- 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" }, suess: function suess(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-: 200rpx; }
我的后端是用java的ssh框架实现的
package ..service; import java.io.IOException; import java.util.List; import javax.servlet.http.HttpServletResponse; import .sf.json.JSONArray; import .apache.struts2.ServletActionContext; import .hibernate.Query; import .hibernate.Session; import .hibernate.SessionFactory; import .springframework.beans.factory.annotation.Autowired; import .springframework.context.annotation.Scope; import .springframework.stereotype.Repository; import .springframework.transaction.annotation.Transactional; import .opensymphony.xwork2.ModelDriven; import ..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 = "suess"; } 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; } }
总结
以上所述是长沙网络推广给大家介绍的微信小程序实现注册登录功能(表单校验、错误提示),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程