ant-design 表单中如何修剪输入字段的空白？

Question

我有一张带有

ant design

的表格。我想为每个输入字段添加一条规则，即用户不能输入空格来填充输入。 （禁止空格）

我尝试了这个方法

{ transform: (value) => value.trim() }

但是不起作用。

感谢您的帮助。

<>
  <Form.Item
    label={t("forms.inputs.Name.label")}
    rules={[
      {
        required: true,
        message: t("forms.inputs.Name.rules.required"),
      },
      {
        min: 3,
        message: t("forms.inputs.Name.rules.minLength"),
      },
    ]}>
    <Input />
  </Form.Item>

  <Form.Item
    label={t("forms.inputs.job.label")}
    rules={[
      {
        required: true,
        message: t("forms.inputs.job.rules.required"),
      },
    ]}>
    <Input />
  </Form.Item>

  <Form.Item
    label={t("forms.inputs.Company.label")}
    rules={[
      {
        required: true,
        message: t("forms.inputs.Company.rules.required"),
      },
    ]}>
    <Input placeholder={t("forms.inputs.currentCompany.placeholder")} />
  </Form.Item>
</>

Answer 1

只需编写自定义验证规则：

<Form.Item
  label="Username"
  name="username"
  rules={[
    {
      required: true,
      message: "Required"
    },
    {
      validator: (_, value) =>
        !value.includes(" ")
          ? Promise.resolve()
          : Promise.reject(new Error("No spaces allowed"))
    }
  ]}
>
  <Input />
</Form.Item>

对于电子邮件验证，您可以使用以下正则表达式模式：

<Form.Item
  label="Email"
  name="email"
  rules={[
    {
      required: true,
      message: "Required"
    },
    {
      pattern: /([-!#-'*+/-9=?A-Z^-~]+(\.[-!#-'*+/-9=?A-Z^-~]+)*|\"([]!#-[^-~ \t]|(\\[\t -~]))+\")@([-!#-'*+/-9=?A-Z^-~]+(\.[-!#-'*+/-9=?A-Z^-~]+)*|\[[\t -Z^-~]*])/,
      message: "Invalid email"
    }
  ]}
  normalize={(value, prevVal, prevVals) => value.trim()}
>
  <Input />
</Form.Item>

演示

Answer 2

不要修剪 onChange，而是在 onBlur 回调中执行此操作：

formatInput = (event) => { const attribute = event.target.getAttribute('name') this.setState({ [attribute]: event.target.value.trim() }) }

或者当您点击 Enter 时

onKeyPress={(e) => {if (e.key === "Enter") {setValue(e.target.value.trim())} }}

Answer 3

你可以这样做而不是使用

trim()

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Form, Input } from 'antd';


const App = () => {
  const [inputValue, setValue] = useState({input1: '', input2: '', input3: ''});
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const handleOnChange = (e) => {
    let {value} = e.target;
    let data = {...inputValue};
    if (value.length && value[0] === ' ') {
      data[e.target.name] = '';
      setValue(data);
      return;
    }
    data[e.target.name] = value;
    setValue(data);
  }

  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <>
        <Form.Item
          label={t("forms.inputs.Name.label")}
          rules={[
            {
              required: true,
              message: t("forms.inputs.Name.rules.required"),
            },
            {
              min: 3,
              message: t("forms.inputs.Name.rules.minLength"),
            },
          ]}>
          <Input name="input1" value={inputValue.input1} onChange={handleOnChange} />
        </Form.Item>

        <Form.Item
          label={t("forms.inputs.job.label")}
          rules={[
            {
              required: true,
              message: t("forms.inputs.job.rules.required"),
            },
          ]}>
          <Input name="input2" value={inputValue.input2} onChange={handleOnChange} />
        </Form.Item>

        <Form.Item
          label={t("forms.inputs.Company.label")}
          rules={[
            {
              required: true,
              message: t("forms.inputs.Company.rules.required"),
            },
          ]}>
          <Input name="input3" value={inputValue.input3} onChange={handleOnChange} placeholder={t("forms.inputs.currentCompany.placeholder")} />
        </Form.Item>
      </>
    </Form>
  );
};

export default App;

Answer 4

<Item
                      initialValue={dto.debtorData?.iin}
                      label={i18n.t('iinBinSearch')}
                      name="debtorIin"
                      rules={[
                        {
                          required: true,
                          transform: (value) => value.trim(),
                          message: i18n.t('formik.validate.required'),
                        },
                        {
                          len: 12,
                          message: i18n.t('error.iinBin.length '),
                          transform: (value) => value.trim(),
                        },
                        {
                          pattern: regex_patterns.ONLY_NUMBERS,
                          message: i18n.t('textKk.must-not-be-text'),
                        },
                      ]}
                    >
                      <Search name="debtorIin" onSearch={this.onDebtorSearch} />
                    </Item>

您需要在规则对象中传递修剪函数 - 这对我有用

Answer 5

只需在规则中将 whitespace 属性设置为 true 即可，如下所示。 (参考)

{
    required: true,
    whitespace: true,
    message: "Required"
}