Next.js中使用Ant Design自定义表单validator不生效问题求助

现有代码的错误点 #

• 校验函数参数错误：Ant Design Form的validator标准签名为async (rule, currentFieldValue, callback)，仅三个参数，你自行声明的minLength、maxLength参数无法拿到对应输入框的值。
• 表单值未绑定到Form实例：你用外部useState存储两个输入框的值，没有和Form的状态管理绑定，Form感知不到值变化，不会自动触发校验逻辑。
• 条件判断逻辑错误：maxLength !== (null || '')写法不符合JS语法规则，null || ''的运算结果恒为''，该判断实际没有覆盖null的场景，正确写法为maxLength != null && maxLength !== ''。
• 校验通过无返回值：validator在校验通过时必须返回Promise.resolve()，否则校验逻辑会异常卡住。

修复后参考代码 #

// 需先通过Form.useForm()创建form实例，绑定到Form组件的form属性上
const [form] = Form.useForm();

<Form form={form} labelCol={{span: 6}} wrapperCol={{span: 18}}>
  <Form.Item label='长度'>
    <Input.Group compact>
      <Form.Item name='minLength' noStyle>
        <InputNumber
          style={{ width: 100, textAlign: 'center', borderRight: 0 }}
          placeholder='最小值'
        />
      </Form.Item>
      <Input
        style={{
          width: 30,
          borderLeft: 0,
          borderRight: 0,
          pointerEvents: 'none',
          backgroundColor: '#fff',
        }}
        placeholder='~'
        disabled
      />
      <Form.Item
        name='maxLength'
        noStyle
        // 配置依赖minLength，min变化时自动触发当前字段校验
        dependencies={['minLength']}
        rules={[
          {
            validator: async (_, maxValue) => {
              const minValue = form.getFieldValue('minLength');
              // 最大值和最小值都有值时判断大小
              if (maxValue != null && maxValue !== '' && minValue != null && minValue !== '') {
                if (maxValue < minValue) {
                  return Promise.reject(new Error('最小值不能大于最大值'));
                }
              }
              // 填了最大值没填最小值的提示
              if (maxValue != null && maxValue !== '' && (minValue == null || minValue === '')) {
                return Promise.reject(new Error('请先填写最小值'));
              }
              // 校验通过必须返回resolve
              return Promise.resolve();
            },
          },
        ]}
      >
        <InputNumber
          style={{
            width: 100,
            borderLeft: 0,
            textAlign: 'center',
          }}
          placeholder='最大值'
        />
      </Form.Item>
      <span
        style={{
          position: 'relative',
          margin: '0 8px',
          top: '3px',
          fontSize: '18px',
        }}
      >
        吋
      </span>
      <Button
        icon={<RedoOutlined />}
        onClick={() => {
          // 用Form实例的方法重置字段，不要用外部useState
          form.setFieldsValue({ minLength: '', maxLength: '' });
        }}
      >
        重置
      </Button>
    </Input.Group>
  </Form.Item>
</Form>

其他自定义校验实现方案 #

• 公共校验规则复用：把通用的校验逻辑抽成独立函数，比如手机号、身份证、邮箱校验，需要用的地方直接引入到rules的validator属性即可，避免重复写代码。
• 多字段关联校验：如果需要多个字段联动校验，可以给Form.Item加dependencies属性，指定依赖的字段名，依赖字段值变化时会自动触发当前字段的校验，不用手动调用校验方法。
• 全局自定义校验：提交表单前可以调用form.validateFields()拿到所有字段的值，自行编写逻辑做全局校验，发现错误可以调用form.setFields([{name: '对应字段名', errors: ['错误提示']}])手动给字段设置错误信息。
• 动态规则校验：可以根据业务状态动态修改rules配置，比如不同用户角色需要不同的校验规则，直接给rules传变量就行，也可以动态生成正则表达式放到pattern属性里实现灵活校验。

内容的提问来源于stack exchange，提问作者hao