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

口说无凭，实现效果如下

前端 部分 

注册功能

1、wxml文件

<view> <view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 用户名 </view> </view> <view> <view> <input placeholder="请输入用户名" bindinput="username"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 手机号码 </view> </view> <view> <view> <input placeholder="请输入手机号码" bindinput="tell"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 密码 </view> </view> <view> <view> <input placeholder="设置密码" password="true" bindinput="password"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 确认密码 </view> </view> <view> <view> <input placeholder="设置密码" password="true" bindinput="rpassword"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> <button type="primary" bindtap="submitHandler">注册</button> </view> </view> <view> <view> <button bindtap="ureg">用户登录</button> </view> </view> <view> <view> <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> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 用户名 </view> </view> <view> <view> <input placeholder="请输入用户名" bindinput="username"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> 密码 </view> </view> <view> <view> <input placeholder="设置密码" password="true" bindinput="password"></input> </view> </view> </view> </view> </view> </view> <view> <view> <view> </view> </view> <view> <view> <view> <view> <view> <button type="primary" bindtap="submitHandler">登录</button> </view> </view> <view> <view> <button bindtap="ureg">用户注册</button> </view> </view> <view> <view> <button bindtap="tlogin">老师登录</button> </view> </view> </view> </view> </view> </view> </view> </view>

2、js文件