form表单校验未通过 onFinish会执行

[TAxiaohu]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.7.8

平台

weapp

重现链接

@nutui/nutui-react-taro

重现步骤

<Form form={form} onFinish={(values) => handleLogin(values)} onFinishFailed={(values, errors) => { console.log(values) console.log(errors) }} > <View className="login-page"> <View className="login-background-header"></View> <View className="login-main"> <p className="login-main-text">登录</p> <div style={{ marginTop: 18 }}> <Form.Item name="username" rules={[ { required: true, message: 请输入${isPhoneLogin ? "手机号" : "账号"}} ]}> <CusInput icon="phone" placeholder={isPhoneLogin ? "手机号" : "账号"} /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message:请输入${isPhoneLogin ? "验证码" : "密码"} }]}> {isPhoneLogin ? ( <CusInput containerStyle={{ marginTop: 8 }} icon="a-safetycertificate" placeholder="验证码" extra={isCountdownActive ? ( <span style={{ color: '7F7F7F', fontSize: 14, fontWeight: 400 }}>{countdownTime} 秒</span> ) : ( <a style={{ color: '#FFB703', fontSize: 14, fontWeight: 400 }} onClick={handleGetVerificationCode}>获取验证码</a> )} /> ) : ( <CusInput containerStyle={{ marginTop: 8 }} icon="lock" placeholder="密码" inputType="password" /> )} </Form.Item> </div> <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between' }}> <a style={{ color: '#7F7F7F' }} onClick={() => { setIsPhoneLogin(!isPhoneLogin) form.resetFields() }}>{isPhoneLogin ? '账号登录' : '手机号登录'}</a> <a style={{ color: '#7F7F7F' }} onClick={handleResetPassword}>忘记密码</a> </div> <Button block loading={loading} fill="outline" nativeType="submit" style={{ marginTop: 16 }} ghost type="primary">登录</Button> {/* <CusButton style={{ marginTop: 16 }} ghost type="primary" onClick={handleLogin}>登录</CusButton> */} {/* <View style={{ textAlign: 'center', marginTop: 20 }}> <p style={{ color: '#7F7F7F', fontSize: 12 }}>- 其他登录方式 -</p> <a style={{ marginTop: 12 }}> <CusIcon style={{ color: '#51aa37' }} size="50px" name="wechat" /> </a> </View> */} </View> </View> </Form>

cusinput
<div className="cus-input-main" style={containerStyle}> {icon ? (<CusIcon className="cus-input-icon" name={icon} />) : null} <Input className={${className || ''} cus-input} placeholder="请输入" type={inputType ? inputTypec : 'text'} {...otherProps} /> {!inputType && extra ? extra : null} {inputType && !extra ? ( <div onClick={() => setInputType(inputTypec === 'text' ? 'password' : 'text')}> {inputTypec === 'text' ? ( <CusIcon name="eye-close" /> ) : ( <CusIcon name="close-eye" /> )} </div> ) : null} </div>

期望的结果是什么？

表单可以获取到数据

实际的结果是什么？

账号和密码两个form input 都输入了值 在onFinish里面获取不到账号 只能拿到密码
正常情况 如form 校验不通过 不会走onFinish

环境信息

No response

其他补充信息

No response

[TAxiaohu]

[TAxiaohu]

因密码缘故 截图里面未显示填写密码 补充两张
这个校验 偶尔生效 偶尔失效

[TAxiaohu]

只在iOS真机上复现过，模拟器等场景 未复现
ios版本18.2.1

[TAxiaohu]

直接扫码体验form表单 也是如此

[Veveue]

最新版本 Form.Item required 属性 在 rules=[{required: true}] 时未生效

[TAxiaohu]

@Veveue 看表单执行错误结果 rules=[{required: true}] 不是已经生效了吗