TaleLin / lin-ui

🌈 简洁、易用、灵活的微信小程序组件库
https://doc.mini.talelin.com
MIT License
4.1k stars 487 forks source link

真机测试表单验证必填项之间切换,切换后会自动失去焦点并提示切换后必填项信息 #1405

Open wuliaodexuanze opened 3 years ago

wuliaodexuanze commented 3 years ago

设备型号:Redmi Note 9

LinUI 版本:0.9.4

微信小程序基础库版本:2.17.3

问题描述及重现步骤:表单验证,当从一个必填项,切换到另一个必填项时,自动失去焦点,并提示切换后必填项的提示信息

相关截图vjij3-2aigg

wxml

<view class="login-wrap">
  <l-form name="formData" bind:linsubmit="submit">
    <l-form-item name="username" rules="{{formRules.usernameRules}}" label="账号">
      <l-input value="{{formData.username}}" id="username" hide-label placeholder="编号/姓名" hide-label
        show-row="{{false}}" />
    </l-form-item>
    <l-form-item name="password" rules="{{formRules.passwordRules}}" label="密码">
      <l-input value="{{formData.password}}" id="password" type="password" placeholder="密码" hide-label
        show-row="{{false}}" />
    </l-form-item>
    <view slot="submit">
      <l-button l-class="btn" size="long" loading="{{loading}}">登录</l-button>
    </view>
    <view slot="reset-behind" class="text">没有账号?<navigator open-type="redirectTo" url="/pages/register/register"
        class="link">立即注册</navigator>
    </view>
  </l-form>
  <l-toast />
</view>

js

Page({
  data: {
    formData: {
      username: '',
      password: '',
      subscrSetting: false
    },
    formRules: {
      usernameRules: {
        required: true,
        message: '请输入编号/姓名',
        trigger: 'blur'
      },
      passwordRules: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 20,
          message: '密码长度在6-20个字符之间',
          trigger: 'blur'
        },
      ]
    },
    loading: false
  },
  onLoad() {
    wx.lin.initValidateForm(this)
  },
  submit(e) {

  },
})

json

{
  "usingComponents": {
    "l-form": "/miniprogram_npm/lin-ui/form",
    "l-form-item": "/miniprogram_npm/lin-ui/form-item",
    "l-input": "/miniprogram_npm/lin-ui/input",
    "l-button": "/miniprogram_npm/lin-ui/button",
    "l-toast": "/miniprogram_npm/lin-ui/toast"
  }
}
aQingYun commented 3 years ago

感谢反馈。该问题会在随后的版本中修复