Form

import { Form } from 'daybreak';
import { Validator, noError } from 'daybreak';

Validator

Validator is used to validate whether the form data is conforms to the rules.

Validator 用于验证表单数据是否符合规则。

noError

noError is a helper function to determine whether there is no errors (in other words: whether the data is an empty object). Its effect is similar to Lodash's isEmpty function.

noError 是一个帮助函数，用于判断是否没有错误（即数据是否为空对象）。其效果类似于 Lodash 的 isEmpty 函数。

Basic usage

() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
      />
    </div>
  )
}() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
      />
    </div>
  )
}

Clearable

When the value of the clearable attribute is true, you can clear the value of the current input field with one click.

当 clearable 属性的值为 true 时，可以一键清空当前输入框的值。

() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        clearable
      />
    </div>
  )
}() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        clearable
      />
    </div>
  )
}

Validate While Inputing

You may want you validate the form data while inputing, so you can do it with the help of onChange parameter.

您可能希望在输入时验证表单数据，因此可以借助 onChange 参数进行验证。

() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
      />
    </div>
  )
}() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
      />
    </div>
  )
}

errorsDisplayMode

By default, the validation result will displays only one message per field. If you want to see more than one message, you can set the value of errorsDisplayMode property to "all".

默认情况下，验证结果对于每个字段只显示一条消息。如果要查看多条消息，可以将 errorsDisplayMode 属性的值设置为 'all'。

() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        errorsDisplayMode="all"
      />
    </div>
  )
}() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        errorsDisplayMode="all"
      />
    </div>
  )
}

transformError

By default, validation results are in English, so if you want to display errors in another language, you can set the transformError property.

默认情况下，验证结果为英语，因此，如果要用另一种语言显示错误信息，可以设置 transformError 属性。

() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const transformError = error => {
    const errorsMap = {
      required: '必填',
      minLength: '太短',
      maxLength: '太长',
      pattern: '格式不正确',
    }
    return errorsMap[error]
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        transformError={transformError}
      />
    </div>
  )
}() => {
  function asyncCheckUserName(username, resolve, reject) {
    setTimeout(() => {
      if (username !== 'admin') {
        resolve()
      } else {
        reject('用户名已经存在!')
      }
    }, 200)
  }
  const customValidator = username =>
    new Promise((resolve, reject) =>
      asyncCheckUserName(username, resolve, reject),
    )
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })
  const [errors, setErrors] = useState({})
  const [fields] = useState([
    { name: 'username', label: '用户名', input: { type: 'text' } },
    { name: 'password', label: '密码', input: { type: 'password' } },
  ])
  const rules = [
    { key: 'username', require: true },
    { key: 'username', minLength: 3, maxLength: 16 },
    { key: 'username', pattern: /^[A-Za-z0-9]+$/ },
    { key: 'password', require: true },
    { key: 'username', validator: customValidator },
  ]
  const onSubmit = () => {
    Validator(formData, rules, errorsResult => {
      setErrors(errorsResult)
      if (noError(errorsResult)) {
        Alert('表单验证通过')
      }
    })
  }
  const onChange = data => {
    setFormData(data)
    Validator(data, rules, errorsResult => {
      setErrors(errorsResult)
    })
  }
  const transformError = error => {
    const errorsMap = {
      required: '必填',
      minLength: '太短',
      maxLength: '太长',
      pattern: '格式不正确',
    }
    return errorsMap[error]
  }
  const buttons = (
    <>
      <Button mode="primary" type="submit">
        提交
      </Button>
    </>
  )
  return (
    <div>
      <Form
        values={formData}
        fields={fields}
        buttons={buttons}
        errors={errors}
        onSubmit={onSubmit}
        onChange={onChange}
        transformError={transformError}
      />
    </div>
  )
}

用户名

密码

用户名

密码

用户名

密码

用户名

密码