收藏
回答

小程序表单按钮要按两次才能提交怎么解决?

写了个登录界面,电脑上没问题,真机调试的时候必须要按两次提交按钮才能把信息提交上去,consol.log一看提交的信息,发现第一次根本就没提交上去,我猜第一次大概是因为要隐藏键盘,第二次才是真正的提交,用户体验极差。。怎么解决啊

代码片段如下:

wxml:

<form bindsubmit='onSubmit'>
  <view class="section-container">
    <image class='image' src='/images/others/account.png'></image>
    <input class="common-input" name="phoneNumber" maxlength='11' type="text" placeholder="请输入账号/手机号"></input>
  </view>
  <view class="section-container">
    <image class='image' src='/images/others/password.png'></image>
    <input class="common-input" name="password" type="password" placeholder="请输入密码"></input>
  </view>
  <view class="btn-area">
    <button class="btn" form-type='submit' style="background:#3775F6; color:white" bindtap="login">登录</button>
  </view>
</form>

js:

Page({
  data: {
  },
  onSubmit:function(event){
    var value = event.detail.value;
    var phoneNumber = value.phoneNumber;
    var password = value.password;
    this.setData({
      phoneNumber: phoneNumber,
      password: password
    })
  },
  login:function(event) {
    wx.clearStorageSync();
    var that=this;
    var phoneNumber = that.data.phoneNumber;
    var password = that.data.password;
    var checkPhone = /^1(3|4|5|7|8)\d{9}$/;
    console.log(phoneNumber);
    if (!(checkPhone.test(phoneNumber))) {
      wx.showToast({
        title: '手机号错误!',
        duration: 2000,
        image: '/images/others/wrong.png'
      })
      return false;
    }
  }
})
回答关注问题邀请回答
收藏

2 个回答

  • dylan
    dylan
    2020-11-04

    同问

    2020-11-04
    有用 1
    回复
  • 扬帆起航
    扬帆起航
    2022-09-25

    input 失焦触发提交(我也遇到楼主的问题了,上网百度一圈都在说问题,而没有解决方法,我也是想了好一会才想到这个方法的🙃)

    2022-09-25
    有用
    回复 2
    • QQ
      QQ
      2023-06-28
      请问是什么方法
      2023-06-28
      回复
    • 苦楝树
      苦楝树
      07-24
      同问
      07-24
      回复
登录 后发表内容
问题标签