form表单中输入框聚焦时清除错误提示

form表单引入

H5（antd-mobile：2.x版本）内引入 import createDOMForm from 'rc-form/lib/createDOMForm';

PC 通过引入 import { Form } from 'antd';

必填输入框校验行为

H5内和PC端，输入框必填校验行为：一般是失焦校验，聚焦时清除错误提示

设置失焦校验

根据文档，设置校验触发的时机即可，属性为：validateTrigger: 'onBlur'，代码如下

    <Form onSubmit={this.handleSubmit} className="login-form">
      <Form.Item>
        {getFieldDecorator('userName', {
          // 设置校验时机为失焦校验
          validateTrigger: 'onBlur',
          rules: [{ required: true, message: 'Please input your username!' }],
        })(
          <Input
            prefix={<Icon type="user" style={{ fontSize: 13 }} />}
            placeholder="Username"
          />
        )}
      </Form.Item>
    </Form>

聚焦清除错误提示

查询该元素是否有错误提示，如果有，用setFieldsValue重置，即可清除错误状态，代码如下

   const FormComponent = (props) => {
    const handleFocusClick = () => {
      const { form } = props;
      // 检测是否有错误提示
      if (form.getFieldError('userName')) {
        const value = form.getFieldValue('userName');
        // 重置，清除错误提示（省略了errors：undefined）
        form.setFieldsValue({ userName: value });
      }
    };

    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator('userName', {
            validateTrigger: 'onBlur',
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ fontSize: 13 }} />}
              placeholder="Username"
              onFocus={handleFocusClick}
            />
          )}
        </Form.Item>
      </Form>
    );
  };