微信小程序?qū)崿F(xiàn)注冊登錄功能(表單校驗、錯誤提示)
更新時間：2019年12月10日 14:00:23 作者：我相信慢思考的力量
這篇文章主要介紹了微信小程序 實現(xiàn)注冊、登錄功能(表單校驗、錯誤提示),本文通過代碼給大家詳細(xì)介紹，需要的朋友可以參考下
口說無憑，實現(xiàn)效果如下
前端 部分
注冊功能
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">
手機(jī)號碼
</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="請輸入手機(jī)號碼" 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="設(shè)置密碼" 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">
確認(rèn)密碼
</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="設(shè)置密碼" 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: "手機(jī)格式有誤"
});
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) {
//頁面跳轉(zhuǎn)
wx.navigateTo({
url: "./../tlogin/tlogin"
});
//頁面跳轉(zhuǎn)
}
});
// 提交
}
}
});
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="設(shè)置密碼" 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 {
//存儲數(shù)據(jù)
// 同步接口立即寫入
wx.setStorageSync("uname", that.data.name + "");
wx.setStorageSync("indentity", "user");
//頁面跳轉(zhuǎn)
//頁面跳轉(zhuǎn)
wx.switchTab({
url: "/pages/center/center"
});
console.log("頁面跳轉(zhuǎn)111");
}
}
});
// 提交
}
}
});
3、wxss文件
.frm {
margin-top: 200rpx;
}
我的后端是用java的ssh框架實現(xiàn)的
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;
}
}
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)注冊登錄功能(表單校驗、錯誤提示)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
單元測試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測試框架Jest搭配TypeScript的安裝與配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
使用clipboard.js庫實現(xiàn)復(fù)制剪切功能
這篇文章介紹了clipboard.js實現(xiàn)復(fù)制功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
數(shù)組想必大家對它并不陌生吧，有些新手朋友們都不知道如何移除數(shù)組元素，下面為大家介紹個示例，喜歡的朋友可以了解下2013-09-09
創(chuàng)建表格，并添加事件...2006-08-08
這篇文章主要介紹了微信小程序如何實現(xiàn)五星評價功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
在js中有方法可以將字符串轉(zhuǎn)化為xml對象，感興趣的朋友可以參考下面的代碼片段，希望對你有所幫助2013-04-04
前天去面試遇到的一道題，面試的問題大概是當(dāng)test.increase被調(diào)用時，test和test2的count值分別是多少2011-03-03
詳解JavaScript中扁平與樹形數(shù)據(jù)的轉(zhuǎn)換
這篇文章主要為大家想介紹了JavaScript中實現(xiàn)扁平與樹形數(shù)據(jù)相互轉(zhuǎn)換的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-01-01
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
詳解釘釘小程序組件之自定義模態(tài)框（彈窗封裝實現(xiàn)）
這篇文章主要介紹了釘釘小程序組件之自定義模態(tài)框（彈窗封裝實現(xiàn)）的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03