微信小程序之登录功能的实现（对表单的校验）

港控/mmm° 2022-01-27 04:11 211阅读 0赞

### 我的qq 2038373094 ###

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

### ***效果图如下*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

### ***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="设置密码" 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="treg">教师注册</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="ulogin">用户登录</button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

## ##

### ***js文件如下*** ###

"use strict";
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = Page({
      data: {
        name: "",
        pass: "",
        isname: false,
        ispass: false
      },
      treg: function treg() {
        wx.navigateTo({
          url: "./../teacher/tregdit"
        });
      },
      ulogin: function ulogin() {
        wx.navigateTo({
          url: "./../ulogin/ulogin"
        });
      },
      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/tlogin.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;
              console.log(info);
              if (info == "fail") {
                wx.showModal({
                  title: '错误',
                  content: '用户名或者密码输入不正确'
                });
              } else {
                //存储数据
                wx.setStorage('uname', that.data.name);
                wx.setStorage('indentity', 'teacher');
                //页面跳转
                wx.navigateTo({
                  url: "./../center/center"
                });
                //页面跳转
              }
            }
          });
          // 提交
        }
      }
    });

## ##

### ***wxss文件如下*** ###

.frm {
      margin-top: 200rpx;
    }

我的后台是用Java写的，采用的是ssh框架，在这里就不写出来了，没什么意思！

附上一份.wx的代码

<template>
      <view>
        <view class="frm">
    <ui-row height="40" border-top border-bottom space-bottom="20">
        <ui-col width="60" border-right vertical-align="middle" align="center">  
        </ui-col>
        <ui-col>
            <ui-row height="40">
                <ui-col span="4" border-right vertical-align="middle" align="center">
                  教师用户名
                </ui-col>
                <ui-col span="8" vertical-align="middle" align="center">
                     <input name="input" placeholder="请输入用户名" bindinput="username"/>
                </ui-col>
            </ui-row>
        </ui-col>
    </ui-row>
    <ui-row height="40" border-top border-bottom space-bottom="20">
        <ui-col width="60" border-right vertical-align="middle" align="center">
        </ui-col>
        <ui-col>
            <ui-row height="40">
                <ui-col span="4" border-right vertical-align="middle" align="center">
                 密码
                </ui-col>
                <ui-col span="8" vertical-align="middle" align="center">
                     <input  placeholder="设置密码" password="true" bindinput="password"/>
                </ui-col>
            </ui-row>
        </ui-col>
    </ui-row>
    <ui-row height="40" border-top border-bottom space-bottom="20">
        <ui-col width="60" border-right vertical-align="middle" align="center">
            
        </ui-col>
        <ui-col>
            <ui-row height="40">
                <ui-col span="4" border-right vertical-align="middle" align="center">
                 <button type="primary" bindtap="submitHandler" >教师登录</button>   
                </ui-col>
                 <ui-col span="4" border-right vertical-align="middle" align="center">
                <button bindtap="treg">教师注册</button>
                 </ui-col>
                  <ui-col span="4" border-right vertical-align="middle" align="center">
                <button bindtap="ulogin">用户登录</button>
                 </ui-col>
            </ui-row>
        </ui-col>
    </ui-row>
      </view>
    </template>
    <script>
    export default {
      config: {
        navigationBarTitleText: "教师登录页面"
      },
      data: {
        name: "",
        pass: "",
        isname: false,
         ispass: false
      },
      treg: function() {
        wx.navigateTo({
          url: "./../teacher/tregdit"
        });
      },
       ulogin: function() {
        wx.navigateTo({
          url: "./../ulogin/ulogin"
        });
      },
      username: function(e) {
        this.setData({ name: e.detail.value });
      },
      password: function(e) {
        this.setData({ pass: e.detail.value });
      },
      submitHandler: function() {
        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/tlogin.action", //接口地址
            data: {
              username: that.data.name,
              password: that.data.pass
            },
            method: "get",
            header: {
              "content-type": "application/json"
            },
            success: res => {
              var info=res.data;
              console.log(info);
              if(info=="fail"){
    wx.showModal({
          title: '错误',
          content: '用户名或者密码输入不正确',
          })
              }else{
      //存储数据
    wx.setStorage('uname', that.data.name);
    wx.setStorage('indentity', 'teacher');
    //页面跳转
     wx.navigateTo({
          url: "./../center/center"
        });
    //页面跳转
              }
    
            }
          });
          // 提交
        }
      }
    };
    </script>
    
    <style lang="less">
    .frm {
      margin-top: 200rpx;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220127/d13257d7f55445bcb16aef6f67a66dda.png