小试牛刀，联动身份证号选择地区，展示地址信息

2023-10-18 10:03:34

1. 身份证号校验

身份证号是重要的个人信息，在填写表单时需要进行校验。Ant Design Pro 提供了内置的身份证号校验规则，您可以在表单中直接使用。

<Form.Item
  label="身份证号"
  name="idCard"
  rules={[{ required: true, message: '请输入身份证号' }, { pattern: /^\d{17}(\d|X)$/, message: '身份证号格式错误' }]}
>
  <Input placeholder="请输入身份证号" />
</Form.Item>

2. 地址联动

在填写地址信息时，通常需要选择省市区三级联动。Ant Design Pro 提供了内置的地址联动组件，您可以在表单中直接使用。

<Form.Item
  label="地址"
  name="address"
  rules={[{ required: true, message: '请选择地址' }]}
>
  <Cascader options={addressOptions} placeholder="请选择地址" />
</Form.Item>

3. 联动身份证号选择地区

当用户输入身份证号后，可以通过身份证号前六位获取用户所属的省市区。然后，可以使用这些信息来初始化地址联动组件，从而实现联动身份证号选择地区的功能。

const [addressOptions, setAddressOptions] = useState([]);

useEffect(() => {
  const idCard = form.getFieldValue('idCard');
  if (idCard && idCard.length === 18) {
    const provinceCode = idCard.substring(0, 6);
    getAddressOptions(provinceCode).then((options) => {
      setAddressOptions(options);
    });
  }
}, [form, idCard]);

4. 展示详细地址信息

当用户选择地址联动组件中的选项后，可以通过选项中的 value 属性获取详细的地址信息。然后，可以使用这些信息来填充表单中的详细地址字段。

const [addressInfo, setAddressInfo] = useState({});

useEffect(() => {
  const addressValue = form.getFieldValue('address');
  if (addressValue && addressValue.length > 0) {
    const address = addressOptions.find((option) => option.value === addressValue);
    setAddressInfo(address);
  }
}, [form, addressOptions, addressValue]);

<Form.Item label="详细地址" name="detailAddress">
  <Input placeholder="请输入详细地址" value={addressInfo.detailAddress} />
</Form.Item>

5. 完整代码示例

import { Form, Input, Cascader } from 'antd';
import { addressOptions } from './addressOptions';

const App = () => {
  const [form] = Form.useForm();

  const [addressOptions, setAddressOptions] = useState([]);

  useEffect(() => {
    const idCard = form.getFieldValue('idCard');
    if (idCard && idCard.length === 18) {
      const provinceCode = idCard.substring(0, 6);
      getAddressOptions(provinceCode).then((options) => {
        setAddressOptions(options);
      });
    }
  }, [form, idCard]);

  const [addressInfo, setAddressInfo] = useState({});

  useEffect(() => {
    const addressValue = form.getFieldValue('address');
    if (addressValue && addressValue.length > 0) {
      const address = addressOptions.find((option) => option.value === addressValue);
      setAddressInfo(address);
    }
  }, [form, addressOptions, addressValue]);

  return (
    <Form form={form}>
      <Form.Item
        label="身份证号"
        name="idCard"
        rules={[{ required: true, message: '请输入身份证号' }, { pattern: /^\d{17}(\d|X)$/, message: '身份证号格式错误' }]}
      >
        <Input placeholder="请输入身份证号" />
      </Form.Item>
      <Form.Item
        label="地址"
        name="address"
        rules={[{ required: true, message: '请选择地址' }]}
      >
        <Cascader options={addressOptions} placeholder="请选择地址" />
      </Form.Item>
      <Form.Item label="详细地址" name="detailAddress">
        <Input placeholder="请输入详细地址" value={addressInfo.detailAddress} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;