Question

 import React from 'react'
 import { Field, reduxForm } from 'redux-form'

 const required = value => value ? undefined : 'Required'

 const renderField = ({ input, label, type, meta: { touched, error, warning } })=> (
                 <div>
                    <label>{label}</label>
                 <div>
                     <input {...input} placeholder={label} type={type}/>

                     {touched && ((error && <span>{error}</span>) ||  
                     (warning && <span>{warning}</span>))}
                      </div>
                     </div>
                 )

             const FieldLevelValidationForm = (props) => {
             const { handleSubmit, pristine, reset, submitting } = props
           return (
                <form onSubmit={handleSubmit}>
                  <Field name="username" type="text"
                   component={renderField} label="Username"
                   validate={[ required, maxLength15 ]}
                   />
                  <div>
                 <button type="submit" disabled={submitting}>Submit</button>
                 <button type="button" disabled={pristine || submitting}    
                    onClick={reset}>Clear Values</button>
                 </div>
                 </form>
                  )
               }

         export default reduxForm({form: 'fieldLevelValidation'})                   
           (FieldLevelValidationForm)

当前实现缺少重复的用户名条目输入验证。我想知道如何定义验证表单中重复的用户名字段输入的逻辑？

Answer 1

您可以在asyncValidate here中使用reduxForm。另外，您应该在验证中使用调度。您应该像下面这样：

const asyncValidate = (values, dispatch) => {
  //using dispatch here
}

如何使用Redux表单在“名称”字段中验证表单重复名称？

1 个答案: