react+antd表单验证--校验必填项+失败时跳转至必填项位置

2,219 阅读1分钟

前言

1.antd表单
2.jQuery
3.promise

方法

1、添加ref

this.formRef = React.createRef()

2、校验

handleSubmit = () => {
    // 表单校验
    this.formRef.current.form.current.validateFields().then(res => {
      //成功时操作
      let values = { ...res }
      ...
    }).catch((error)=>{
      if(error && error.errorFields.length>0){
        // console.log("表单校验失败!!!!");
        let errorFields = error.errorFields;
        let startEleId  = errorFields[0].name.join("_");
        $(`#${startEleId}`).focus();
      }
    })
}