Question

我正在使用反应最终形式来验证登录页面的密码和注册链接，现在，当我单击“忘记密码”或注册链接时，即使我没有填写用户名也不应触发任何验证名称和密码。我尝试过将“忘记密码”和“注册链接”保留在标记之外，但单击“忘记密码并注册”链接仍会触发验证。仅当我单击“提交”按钮时，才触发验证。

当我单击页面上的任何超级链接时，它不应要求验证表单，因为超链接没有任何验证。

这是代码示例

loginPage = () => {
    const {t: translate} = this.props;
    const {
      match: {
        params: {
          authUrlKey = ''
        } = {},
      } = {},
    } = this.props;
    return (
      <Form
        onSubmit={ (values)=> this.validateUserCredentials(values)}
        render={({ handleSubmit}) => (
          <form onSubmit={handleSubmit}>
            <button className="hidden" type="submit"/>
            <h1 className="hw-block--pb">{translate('login.heading')}</h1>
            <p className="hw-text-lead hw-block--pb-small">{translate('login.text')}</p>
            { this.state.description !==''  &&  <p className="hw-text-lead hw-block--pb-small">{this.state.description}</p> }

            <div className="hw-grid">
              <div className="hw-grid__item hw-one-whole hw-medium--one-fifth hw-large--one-sixth">
                <label className="hw-label">{translate('login.landcode')}
                  <Field name="landcode" component={Dropdown} options={getCountryList()} onOptionSelect={this.onCountrySelect}/>
                </label>
              </div>
              <div className="hw-grid__item hw-one-whole hw-medium--four-fifths hw-large--five-sixths">
                <label className="hw-label">{translate('login.mobileNumber')}
                  <Field type="text" component={InputType}
                    validate={composeValidators(mobileNumberRequired, validMobileNumberWithISDCode)}
                    placeholder={translate('login.mobileNumberPlaceHolder')} name="phoneNumber"/>
                </label>
              </div>
            </div>

            <label className="hw-label">{translate('login.password')}

              <Field type="password" component={InputType} validate={passwordRequired}  placeholder={translate('login.passwordPlaceHolder')}  name="password"/>
            </label>
            <Link className="hw-link" to={{ pathname: '/password/reset', state: {authUrlKey} }}>{translate('login.forgotPassword')}</Link>

            <ErrorInfo error={this.state.error} errorMessage={this.state.errorMessage} translate={translate}/>

            <div className="hw-block hw-block--mt-small">
              <div className="hw-grid">
                <div className="hw-grid__item hw-small--one-whole hw-medium--one-quarter hw-block--mb-smaller">
                  <button className="hw-button hw-button--primary hw-button--full" type="submit">{translate('login.loginButton')}</button>
                </div>
                <div className="hw-grid__item hw-one-whole hw-medium--three-quarters hw-block--mt-smaller">
                  <Link className="hw-link"
                    to={{ pathname: '/register', state: {authUrlKey} }}>{translate('login.registerButton')}</Link>
                </div>
              </div>
            </div>

          </form>)}
      />
    )}

代码中使用的验证功能

export const validMobileNumberWithISDCode = (fieldValue='') => {
  const value = trimValue(fieldValue);
  const regex1 = /^\+?((45)|(46)|(47))?( )?\d{8,10}$/
  return (regex1.test(value))? undefined :  message[root.lang].validMobileNumber;
}

export const validMobileNumber = (fieldValue='') => {
  const value = trimValue(fieldValue);
  const regex1 =  /^\d{8,10}$/;
  return (regex1.test(value))? undefined :  message[root.lang].validMobileNumber;
}

export const mobileNumberRequired = (fieldValue='') => {
  const value = trimValue(fieldValue);
  return value ? undefined : message[root.lang].mobileNumberRequired;
}

export const passwordRequired = (fieldValue='') => {
  const value = trimValue(fieldValue);
  return value ? undefined: message[root.lang].passwordRequired;
}

export const required =(fieldValue)=> {
  const value = trimValue(fieldValue);
  return value ? undefined : message[root.lang].required;
}```

validateUserCredentials -> This function does not contains any validation.It is used to retrieve form values and send it to server

Answer 1

React Final Form对表单中的每个值更改都调用验证函数，以确保表单有效性始终是最新的。由于您未包含验证功能的代码，因此我无法确定您要执行的操作。您的验证功能运行起来应该非常便宜（例如，必填字段，值长度等）。实际的身份验证应在提交时进行。

以最终形式发布问题

1 个答案: