写了个登录界面，电脑上没问题，真机调试的时候必须要按两次提交按钮才能把信息提交上去，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;
    }
  }
})