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

我的qq 2038373094我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会做过律师在线咨询系统、共享农场手机app、在线心理咨询系统效果图如下wxml文件如下<view><view class="frm"><view class="ui-...

qq_37591637

4408人浏览 · 2019-05-25 10:08:09

qq_37591637 · 2019-05-25 10:08:09 发布

我的qq 2038373094

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

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

效果图如下

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^