Form表单验证

Warning: [antd: Switch] value is not a valid prop, do you mean checked?
Warning: React does not recognize the valuePropName prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase valuepropname instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React不能识别dom元素上的非标准attribute报出的警告，最终的渲染结果中React会移除这些非标准的attribute
用 rest接收属性参数，仅将 rest属性参数传递给子组件或对应的dom，自定义属性只组件自己使用

async function onSubmit(){
  const values = form.getFieldsValue() // 不校验表单
  // 校验表单
  const formValues = await form.validateFields();
}
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
async function init() {
  await sleep(100)
}

formInstance 属性

[
  "getFieldValue",
  "getFieldsValue",
  "getFieldError",
  "getFieldWarning",
  "getFieldsError",
  "isFieldsTouched",
  "isFieldTouched",
  "isFieldValidating",
  "isFieldsValidating",
  "resetFields",
  "setFields",
  "setFieldValue",
  "setFieldsValue",
  "validateFields",
  "submit",
  "_init",
  "getInternalHooks",
  "__INTERNAL__",
  "scrollToField",
  "getFieldInstance"
]

rules验证

• required 是否必填项，Boolean
• message 提示信息，String
• type 内置校验类型，String
• validator 自定义校验函数，Function
• pattern 正则表达式校验，Regexp
• len 字段长度，Number
• max 最大长度，Number
• min 最小长度，Number
• whitespace 空格是否会被视为错误，Boolean

滚动到错误的位置

function App() {
    function valuesChange() {
    form.validateFields(err => {
    if (err) {
      const scroll = {
        alignWithTop: true,
        onlyScrollIfNeeded: true,
        allowHorizontalScroll: false,
      };
      form.validateFieldsAndScroll({ scroll });
    }
      });
    }
  return (
      <Form />
  )
}