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

2023-08-04 18:06:04 63

口说无凭，实现效果如下

前端部分

注册功能

1、wxml文件

2、js文件

"usestrict";

Object.defineProperty(exports,"__esModule",{
value:true
});
exports.default=Page({
data:{
name:"",
pass:"",
rpass:"",
tell:"",
isname:false,
istell:false,
ispass:false
},
treg:functiontreg(){
wx.navigateTo({
url:"./../teacher/tregdit"
});
},
ureg:functionureg(){
wx.navigateTo({
url:"./../ulogin/ulogin"
});
},
tell:functiontell(e){
this.setData({tell:e.detail.value});
},
username:functionusername(e){
this.setData({name:e.detail.value});
},
password:functionpassword(e){
this.setData({pass:e.detail.value});
},
rpassword:functionrpassword(e){
this.setData({rpass:e.detail.value});
},
submitHandler:functionsubmitHandler(){
varthat=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:functionsuccess(res){
//页面跳转
wx.navigateTo({
url:"./../tlogin/tlogin"
});
//页面跳转
}
});
//提交
}
}
});

3、wxss文件

.frm{
margin-top:200rpx;
}

登录功能

1、wxml文件













用户名





















密码






















登录




用户注册




老师登录

2、js文件

"usestrict";

Object.defineProperty(exports,"__esModule",{
value:true
});
exports.default=Page({
data:{
name:"",
pass:"",
isname:false,
ispass:false
},
ureg:functionureg(){
wx.navigateTo({
url:"./../user/reg"
});
},
tlogin:functiontlogin(){
wx.navigateTo({
url:"./../tlogin/tlogin"
});
},
username:functionusername(e){
this.setData({name:e.detail.value});
},
password:functionpassword(e){
this.setData({pass:e.detail.value});
},
submitHandler:functionsubmitHandler(){
varthat=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:functionsuccess(res){
varinfo=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框架实现的

packagecn.com.service;
importjava.io.IOException;
importjava.util.List;
importjavax.servlet.http.HttpServletResponse;
importnet.sf.json.JSONArray;
importorg.apache.struts2.ServletActionContext;
importorg.hibernate.Query;
importorg.hibernate.Session;
importorg.hibernate.SessionFactory;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.context.annotation.Scope;
importorg.springframework.stereotype.Repository;
importorg.springframework.transaction.annotation.Transactional;
importcom.opensymphony.xwork2.ModelDriven;
importcn.com.bean.User;
@Repository(value="ulogin")
@Scope("prototype")
publicclassUloginimplementsModelDriven{
@Autowired
privateSessionFactorysf;
@Autowired
privateUseru;
//注册功能
@Transactional
publicStringregedit(){
Sessionsession=sf.getCurrentSession();
session.save(u);
returnnull;
}

//登录功能
@Transactional
publicStringlogin(){
Sessionsession=sf.getCurrentSession();
Stringsql="fromUserwhereusername=?andpassword=?";
Queryquery=session.createQuery(sql);
query.setString(0,u.getUsername());
query.setString(1,u.getPassword());
Useruu=(User)query.uniqueResult();
Stringinfo=null;
if(uu!=null){
info="success";
}else{
info="fail";
}
HttpServletResponseresponse=ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try{
response.getWriter().write(info);
}catch(IOExceptione){
e.printStackTrace();
}
returnnull;
}

@Override
publicUsergetModel(){
//TODOAuto-generatedmethodstub
returnu;
}
}

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐