devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：2023面试高手 | 2024-02-22 22:50:35

赞

踩

wx.showmodal密码

我的qq 2038373094

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

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

 

 

效果图如下

wxml文件如下 

  1. <view>
  2.   <view class="frm">
  3.     <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;">
  4.       <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
  5.         <view class="ui-col-content align-center valign-middle">
  6.         </view>
  7.       </view>
  8.       <view class="ui-col" style="">
  9.         <view class="ui-col-content">
  10.           <view class="ui-row" style="height:40px;">
  11.             <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%;">
  12.               <view class="ui-col-content align-center valign-middle">
  13.                 教师用户名
  14.               </view>
  15.             </view>
  16.             <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
  17.               <view class="ui-col-content align-center valign-middle">
  18.                 <input name="input" placeholder="请输入用户名" bindinput="username"></input>
  19.               </view>
  20.             </view>
  21.           </view>
  22.         </view>
  23.       </view>
  24.     </view>
  25.     <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;">
  26.       <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
  27.         <view class="ui-col-content align-center valign-middle">
  28.         </view>
  29.       </view>
  30.       <view class="ui-col" style="">
  31.         <view class="ui-col-content">
  32.           <view class="ui-row" style="height:40px;">
  33.             <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%;">
  34.               <view class="ui-col-content align-center valign-middle">
  35.                 密码
  36.               </view>
  37.             </view>
  38.             <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" style="flex: 0 0 66.66666666666666%;">
  39.               <view class="ui-col-content align-center valign-middle">
  40.                 <input placeholder="设置密码" password="true" bindinput="password"></input>
  41.               </view>
  42.             </view>
  43.           </view>
  44.         </view>
  45.       </view>
  46.     </view>
  47.     <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;">
  48.       <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" style="flex:0 0 60px;">
  49.         <view class="ui-col-content align-center valign-middle">
  50.  
  51.         </view>
  52.       </view>
  53.       <view class="ui-col" style="">
  54.         <view class="ui-col-content">
  55.           <view class="ui-row" style="height:40px;">
  56.             <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%;">
  57.               <view class="ui-col-content align-center valign-middle">
  58.                 <button type="primary" bindtap="submitHandler">教师登录</button>
  59.               </view>
  60.             </view>
  61.             <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%;">
  62.               <view class="ui-col-content align-center valign-middle">
  63.                 <button bindtap="treg">教师注册</button>
  64.               </view>
  65.             </view>
  66.             <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%;">
  67.               <view class="ui-col-content align-center valign-middle">
  68.                 <button bindtap="ulogin">用户登录</button>
  69.               </view>
  70.             </view>
  71.           </view>
  72.         </view>
  73.       </view>
  74.     </view>
  75.   </view>
  76. </view>

 

js文件如下

  1. "use strict";
  2.  
  3. Object.defineProperty(exports, "__esModule", {
  4.   value: true
  5. });
  6. exports.default = Page({
  7.   data: {
  8.     name: "",
  9.     pass: "",
  10.     isname: false,
  11.     ispass: false
  12.   },
  13.   treg: function treg() {
  14.     wx.navigateTo({
  15.       url: "./../teacher/tregdit"
  16.     });
  17.   },
  18.   ulogin: function ulogin() {
  19.     wx.navigateTo({
  20.       url: "./../ulogin/ulogin"
  21.     });
  22.   },
  23.   username: function username(e) {
  24.     this.setData({ name: e.detail.value });
  25.   },
  26.   password: function password(e) {
  27.     this.setData({ pass: e.detail.value });
  28.   },
  29.   submitHandler: function submitHandler() {
  30.     var that = this;
  31.     if (that.data.name == "") {
  32.       wx.showModal({
  33.         title: "错误",
  34.         content: "用户名不能为空"
  35.       });
  36.       that.isname = false;
  37.     } else {
  38.       that.isname = true;
  39.     }
  40.     if (that.data.pass == "") {
  41.       wx.showModal({
  42.         title: "错误",
  43.         content: "密码不能为空"
  44.       });
  45.       that.ispass = false;
  46.     } else {
  47.       that.ispass = true;
  48.     }
  49.     if (that.ispass && that.isname) {
  50.       // 提交
  51.       wx.request({
  52.         url: "http://localhost:8080/Teacher/tlogin.action", //接口地址
  53.         data: {
  54.           username: that.data.name,
  55.           password: that.data.pass
  56.         },
  57.         method: "get",
  58.         header: {
  59.           "content-type": "application/json"
  60.         },
  61.         success: function success(res) {
  62.           var info = res.data;
  63.           console.log(info);
  64.           if (info == "fail") {
  65.             wx.showModal({
  66.               title: '错误',
  67.               content: '用户名或者密码输入不正确'
  68.             });
  69.           } else {
  70.             //存储数据
  71.             wx.setStorage('uname', that.data.name);
  72.             wx.setStorage('indentity', 'teacher');
  73.             //页面跳转
  74.             wx.navigateTo({
  75.               url: "./../center/center"
  76.             });
  77.             //页面跳转
  78.           }
  79.         }
  80.       });
  81.       // 提交
  82.     }
  83.   }
  84. });

 

wxss文件如下

  1. .frm {
  2.   margin-top: 200rpx;
  3. }

 

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

附上一份.wx的代码

  1. <template>
  2.   <view>
  3.     <view class="frm">
  4. <ui-row height="40" border-top border-bottom space-bottom="20">
  5.     <ui-col width="60" border-right vertical-align="middle" align="center">  
  6.     </ui-col>
  7.     <ui-col>
  8.         <ui-row height="40">
  9.             <ui-col span="4" border-right vertical-align="middle" align="center">
  10.               教师用户名
  11.             </ui-col>
  12.             <ui-col span="8" vertical-align="middle" align="center">
  13.                  <input name="input" placeholder="请输入用户名" bindinput="username"/>
  14.             </ui-col>
  15.         </ui-row>
  16.     </ui-col>
  17. </ui-row>
  18. <ui-row height="40" border-top border-bottom space-bottom="20">
  19.     <ui-col width="60" border-right vertical-align="middle" align="center">
  20.     </ui-col>
  21.     <ui-col>
  22.         <ui-row height="40">
  23.             <ui-col span="4" border-right vertical-align="middle" align="center">
  24.              密码
  25.             </ui-col>
  26.             <ui-col span="8" vertical-align="middle" align="center">
  27.                  <input  placeholder="设置密码" password="true" bindinput="password"/>
  28.             </ui-col>
  29.         </ui-row>
  30.     </ui-col>
  31. </ui-row>
  32. <ui-row height="40" border-top border-bottom space-bottom="20">
  33.     <ui-col width="60" border-right vertical-align="middle" align="center">
  34.         
  35.     </ui-col>
  36.     <ui-col>
  37.         <ui-row height="40">
  38.             <ui-col span="4" border-right vertical-align="middle" align="center">
  39.              <button type="primary" bindtap="submitHandler" >教师登录</button>   
  40.             </ui-col>
  41.              <ui-col span="4" border-right vertical-align="middle" align="center">
  42.             <button bindtap="treg">教师注册</button>
  43.              </ui-col>
  44.               <ui-col span="4" border-right vertical-align="middle" align="center">
  45.             <button bindtap="ulogin">用户登录</button>
  46.              </ui-col>
  47.         </ui-row>
  48.     </ui-col>
  49. </ui-row>
  50.   </view>
  51. </template>
  52. <script>
  53. export default {
  54.   config: {
  55.     navigationBarTitleText: "教师登录页面"
  56.   },
  57.   data: {
  58.     name: "",
  59.     pass: "",
  60.     isname: false,
  61.      ispass: false
  62.   },
  63.   treg: function() {
  64.     wx.navigateTo({
  65.       url: "./../teacher/tregdit"
  66.     });
  67.   },
  68.    ulogin: function() {
  69.     wx.navigateTo({
  70.       url: "./../ulogin/ulogin"
  71.     });
  72.   },
  73.   username: function(e) {
  74.     this.setData({ name: e.detail.value });
  75.   },
  76.   password: function(e) {
  77.     this.setData({ pass: e.detail.value });
  78.   },
  79.   submitHandler: function() {
  80.     var that = this;
  81.     if (that.data.name == "") {
  82.       wx.showModal({
  83.         title: "错误",
  84.         content: "用户名不能为空"
  85.       });
  86.       that.isname = false;
  87.     } else {
  88.       that.isname = true;
  89.     }
  90.      if (that.data.pass == "") {
  91.       wx.showModal({
  92.         title: "错误",
  93.         content: "密码不能为空"
  94.       });
  95.       that.ispass = false;
  96.     } else {
  97.       that.ispass = true;
  98.     }
  99.     if (that.ispass&&that.isname) {
  100.       // 提交
  101.       wx.request({
  102.         url: "http://localhost:8080/Teacher/tlogin.action", //接口地址
  103.         data: {
  104.           username: that.data.name,
  105.           password: that.data.pass
  106.         },
  107.         method: "get",
  108.         header: {
  109.           "content-type": "application/json"
  110.         },
  111.         success: res => {
  112.           var info=res.data;
  113.           console.log(info);
  114.           if(info=="fail"){
  115. wx.showModal({
  116.       title: '错误',
  117.       content: '用户名或者密码输入不正确',
  118.       })
  119.           }else{
  120.   //存储数据
  121. wx.setStorage('uname', that.data.name);
  122. wx.setStorage('indentity', 'teacher');
  123. //页面跳转
  124.  wx.navigateTo({
  125.       url: "./../center/center"
  126.     });
  127. //页面跳转
  128.           }
  129.  
  130.         }
  131.       });
  132.       // 提交
  133.     }
  134.   }
  135. };
  136. </script>
  137.  
  138. <style lang="less">
  139. .frm {
  140.   margin-top: 200rpx;
  141. }
  142. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/131728
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。