微信小程序登陆、注册在同一页面进行表单提交

没有家的猫

于 2023-07-20 12:30:30 发布

阅读量687

点赞数 4

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/m0_59408612/article/details/131827533

版权

登陆注册

针对下面同意按钮监听两个表单问题给出建议：

  <view class="sumbit-btn">
    <button class="button" 
    style="background-color: #33ccff;font-size: 30rpx;" 
    type="primary">立即{{current==1?'登录':'注册'}}</button>
  </view>

在同一个按钮监听两个表单数据是不行的，所以按我下面修改就OK，把按钮拆开，一个按钮对应一个表单。

.wxml代码：

<view class="top-box">
  <view class="next-text1">这里是薄纸人AI</view>
  <view class="next-text2">欢迎你来使用!</view>
</view>
<!-- 登录、注册 -->
<view class="center-box">
  <view class="nav">
    <view class="left {{current==1?'select':''}}" bindtap="click" data-code="1">
      <text>登录</text>
    </view>
    <view class="right {{current==0?'select':''}}" bindtap="click" data-code="0">
      <text>注册</text>
    </view>
  </view>
  <!-- 登录 -->
  <form id="oneform" bindsubmit="doLogin">
    <view>
      <view class="input-box" hidden="{{current==0}}">
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input name="username" class="input" auto-focus placeholder="请输入您的账号" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input name="password" password class="input" auto-focus placeholder="请输入登录密码" />
        </view>
        <view class="forget">
          <!-- <text>忘记密码?</text> -->
        </view>
        <view class="sumbit-btn">
          <button form-type="submit" type="primary" style="background-color: #33ccff;font-size: 30rpx;">立即登录</button>
        </view>

      </view>
    </view>
  </form>

  <!-- 注册 -->
  <form id="towform" bindsubmit="MeUserLogin">
    <view class="input-box" hidden="{{current==1}}">
      <view class="wei-input">
        <icon type="success" color="#44ADFB" size="16"></icon>
        <input name="username" class="input" auto-focus placeholder="请输入账号" />
      </view>
      <view class="wei-input">
        <icon type="waiting" color="#44ADFB" size="16"></icon>
        <input name="phone" class="input" auto-focus placeholder="请输入手机号" />
      </view>
      <view class="wei-input">
        <icon type="waiting" color="#44ADFB" size="16"></icon>
        <input class="input" auto-focus placeholder="请输入6位验证码" />
        <text class="input-code" bindtap="getCode">{{codeText}}</text>
      </view>
      <view class="wei-input">
        <icon type="success" color="#44ADFB" size="16"></icon>
        <input name="password" password  class="input" auto-focus placeholder="请输入密码" />
      </view>
      <view class="wei-input">
        <icon type="success" color="#44ADFB" size="16"></icon>
        <input name="checkpass" password class="input" auto-focus placeholder="请确认密码" />
      </view>
      <view class="wei-input">
        <icon type="success" color="#44ADFB" size="16"></icon>
        <input name="name" class="input" auto-focus placeholder="请输入姓名" />
      </view>
      <view class="gender">
        <radio-group name="gender" bindchange="bandleChange" >
          <icon class="gender-icon" type="success" color="#44ADFB" size="16"></icon>
          <text class="gender-text">性别 </text>
          <radio class="gender-radio" style="color: brown;" value='1'></radio>
          <text class="gender-texts">男</text>
          <radio class="gender-radio" value='0'></radio>
          <text class="gender-texts">女</text>
        </radio-group>
      </view>

      <view>
        <button form-type="submit" type="primary" style="background-color: #33ccff;font-size: 30rpx;" >立即注册</button>
        <!-- <button>立即注册</button> -->
      </view>
    </view>
  </form>


</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view>
<view class="shadow shadow-2"></view>










  <!-- <view class="input-box" hidden="{{current==0}}">
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入手机号/登录名" />
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入登录密码" />
    </view>
    <view class="forget">
      <text>忘记密码?</text>
    </view>
  </view> -->

.wxss代码

page{
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
}
/* 顶部背景 */
.top-box{
  height: 25%;
  background-image: linear-gradient( #000000,#0400ff);
  padding: 30rpx;
  color: rgba(134, 133, 133, 0.849);
  font-weight: bold;
  font-family: "楷体";
  /* margin-left: 10rpx; */
}
.next-text1{
  margin-top: 15rpx;
  margin-left: 15rpx;
}
.next-text2{
  margin-top: 15rpx;
  margin-left: 5rpx;
}
/* 内容 */
.center-box{
  background-color: white;
  margin: -20% 20rpx 0rpx 20rpx;
  padding: 25rpx;
  border-radius: 70rpx;
  -webkit-filter: drop-shadow(0 0 8rpx #000000);
  filter: drop-shadow(0 0 8rpx #44ADFB);
}
/* 导航 */
.nav{
  display: flex;
  text-align: center;
  font-size: 32rpx;
  margin-bottom: 8%;
}
.left{
  flex: 1;
  font-weight: bold;
}
.right{
  flex: 1;
  font-weight: bold;
}
.select{
  font-weight: bold;
  color: #33ccff;
}
.select text{
  padding-bottom: 5rpx;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom: 5rpx solid #33ccff;
}
.wei-input{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.input-box{
  margin: 20rpx;
}
.input{
  padding-left: 20rpx;
  font-size: 30rpx;
}
.input-code{
  position: absolute;
  right: 40rpx;
  font-size: 26rpx;
  padding: 10rpx 15rpx;
  color: white;
  background-color: #FF8C69;
  border-radius: 10rpx;
}
.forget{
  font-size: 26rpx;
  color: #33ccff;
  margin-top: 20rpx;
  text-align: right;
}
.sumbit-btn{
  margin: 6% 30rpx 30rpx 30rpx;
}
.gender-radio{
  /* background-color: #33ccff; */
  color: #5e5e5e;
  margin-left: 20rpx;
  left: 20rpx;
  transform: scale(0.8);
  /* flex: 10rpx; */
  /* width: 100rpx;
  height: 10rpx; */
  
}
.gender-text{
  margin-left: 20rpx;
  font-size: 30rpx;
}
.gender-texts{
  margin-left: 10rpx;
  font-size: 30rpx;
}
/* .gender-icon{
  margin-top: 100rpx;
} */
/* 性别单选框 */
.gender{
  
  /* left: 10rpx; */
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  color: #776d6d;
  font-size: 31rpx;
  /* size: 26rpx; */
}
/* 重影 */
.shadow{
  box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
  border-radius: 25rpx;
  background-color: white;
}
.shadow-1{
  height: 40rpx;
  margin: -20rpx 50rpx 0 50rpx;
}
.shadow-2{
  position: relative;
  z-index: -888;
  height: 50rpx;
  margin: -30rpx 80rpx 0 80rpx;
}
/* 最底部 */
.bottom-box{
  position:fixed; 
  bottom: 10rpx;
  width:100%;
  font-size: 24rpx;
  color: gray;
  display: flex;
  justify-content: center;
}