当前位置： 微信小程序表单验证-微信小程序表单
发布时间：2023-01-25 07:03 浏览次数：次 作者：佚名
微信小程序实现注册登录功能（表单验证、错误提示）
更新时间：2019-12-10 14:00:23 作者：我相信慢思考的力量
本文主要介绍微信小程序的注册登录功能（表单验证、错误提示）。 本文通过代码给大家做一个详细的介绍。 需要的朋友可以参考以下
没有根据的话微信小程序表单验证，效果如下
前端
注册功能
1.wxml文件
用户名 手机号码 密码
确认密码
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.wxs文件
.frm {
margin-top: 200rpx;
}
登录功能
1.wxml文件
用户名 密码
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.wxs文件
.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 {
@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;
}
}
总结
以上就是小编为大家介绍的实现注册登录功能（表单验证，错误提示）的微信小程序，希望对大家有所帮助微信小程序表单验证，有什么问题可以给我留言，小编会回复及时给你。 非常感谢您对脚本之家网站的支持！
上一篇 
