Antd4.x 修改密码弹窗

芋圆社区 > 编程 > Ant Design > Antd4.x 修改密码弹窗

199

2022-08-09

2022-08-17

Hey、小怪兽

• Ant Design版本 4.x（主要！！！）
• 这篇并不是讲述如何写一个修改密码的弹窗，而是因为萌新同事不知道咋写表单验证，不知道咋修改密码，帮忙的时候顺便做了一下笔记
• 一打开弹窗就看到有个黄色的警告：
• 其实是有2个相同id的form表单了，修改密码这个弹窗里的form和外面有个form id冲突，都叫basic，找到弹窗里的form的代码就好了

// 修改前
<Form form={form} name="basic">

// 修改后 弹窗里的form改个name，这个name其实就是id
<Form form={form} name="modifyPasswordForm">

• 还有一个红色的报错，每个child需要一个独立的key：
• 和平时的不一样的是，他是在Content里报错的，不是那些table，select那么好找，我找了好久终于找到了，原来的代码：
• 乍一看好像没啥错误，自定义了Modal的footer，但是对于这个footer来说，这两个Button其实就相当于child，所以也需要唯一的key，加个key就好了：

footer={[
    <Button key="back" onClick={handleCancel}>取消</Button>,
    <Button key="submit" type="primary" htmlType="submit" onClick={onFinish}>确定</Button>
]}

• 其实Ant Design官方文档也有：
• 接着就写修改密码的验证，这里就举个新密码的例子（其他的一样），用Form表单Item里的rules来验证：
- 验证是否必填，也可以理解为是否可以为空
- 验证开头是否能有空格，whitespace为true不能有空格
- 验证新密码长度，min为最小，max为最大，由于我不晓得最大限制多少，先写了个最小
- 验证密码，正则表达式，必须包含大小写字母，数字和特殊字符

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
    },
}

<Form.Item
    label="新密码"
    {...formItemLayout}
    name="newpassword"
    rules={[
        { required: true, message: '请输入新密码' },
        { whitespace: true, message: '开头不能为空格' },
        { min: 8, message: '新密码不少于8位' },
        { pattern: /(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[0-9].*)(?=.*[!@#$%^&*?])/, message: '新密码须包含大小写字母、数字和特殊字符' },
    ]}
>
    <Input type="password" autoComplete="off" />
</Form.Item>

• Ant Design 4.x是我上面这样写的，3.x可以这样写（具体参考官方文档getFieldDecorator的用法）：

{getFieldDecorator('newPassword', {
    rules: [
        { required: true, message: '请输入新密码!' },
        { whitespace: true, message: '开头不能为空格' },
        { min: 8, message: '新密码不少于8位' },
        { pattern: /(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[0-9].*)(?=.*[!@#$%^&*?])/, message: '新密码须包含大小写字母、数字和特殊字符' },
    ],
})(
    <Input type="password" autoComplete="new-password"/>,
)}

• 有个问题，4.x的输入框它输入一个数字就会验证，我输入了123456就给我验证了6次，这显然不是希望的：
• 可以加个修改输入框的验证时机：

onchange 、onblur 、onkeyup 、oninput

• 需要驼峰写法，不然会报错：

// 驼峰
onChange 、onBlur 、onKeyUp 、onInput

• 写在Form.Item的validateTrigger里就可以了：
```
validateTrigger='onBlur'
```
• 还有个小优化，就是当我们输入空格的时候，可以看到表单验证了4次（第一次不为空已经验证通过了），其实应该只验证2次，如果已经不符合第2条的验证，那么就不需要再进行剩下的验证了：
• 可以看到官方文档给我们提供了validateFirst：
• 默认值是false，我们需要传true，注意是boolean：

// 错误写法，我之前没看到Boolean，传了字符串人傻了不起作用
validateFirst='true'

// 正确写法
validateFirst={true}

• 完整代码（由于涉及公司业务，已修改了亿点）：

// 省略一些导入

const [form] = Form.useForm();

// 修改密码的窗口
const [isModalVisible, setIsModalVisible] = useState(false);

// 显示弹窗
const showModal = () => {
    setIsModalVisible(true);
};

// 弹窗点击取消
const handleCancel = () => {
    setIsModalVisible(false);
};

// 修改密码提交表单且数据验证成功后回调事件
const onFinish = () => {
    form.validateFields().then((values) => {
        console.log('三个输入框输入的内容, values', values);
        // 更新密码的方法
    }).catch(() => {});
};

const formLayout = {
    labelCol={{
        span: 8,
    }}
    wrapperCol={{
        span: 16,
    }}
}

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};

// 这个本来是在utils文件的
const passwordValidate = [
    { min: 8, max: 16, message: '新密码应为8-16位' },
    { pattern: /(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[0-9].*)(?=.*[!@#$%^&*?])/, message: '须包含大小写字母、数字和特殊字符' },
]

<Modal
    title="修改密码"
    visible={isModalVisible}
    onOk={showModal}
    onCancel={handleCancel}
    destroyOnClose={true}
    footer={[
        <Button key="back" onClick={handleCancel}>取消</Button>,
        <Button key="submit" type="primary" htmlType="submit" onClick={onFinish}>确定</Button>,
    ]}
>
    <Form form={form} name="modal" {...formLayout} autoComplete="off">
        <Form.Item
            label="名字"
            name="name"
            validateTrigger="onBlur"
            rules={[
                { required: true, message: '请输入名字' },
                { whitespace: true, message: '开头不能为空格' },
            ]}
            {...formItemLayout}
        >
            <Input />
        </Form.Item>
        <Form.Item
            label="原始密码"
            name="oldpassword"
            validateTrigger="onBlur"
            rules={[
                { required: true, message: '请输入原始密码' },
                { whitespace: true, message: '开头不能为空格' },
            ]}
            {...formItemLayout}
        >
            <Input type="password" autoComplete="off" />
        </Form.Item>
        <Form.Item
            label="新密码"
            name="newpassword"
            validateFirst={true}
            validateTrigger="onBlur"
            rules={[
                { required: true, message: '请输入新密码' },
                { whitespace: true, message: '开头不能为空格' },
                ...passwordValidate,
            ]}
            {...formItemLayout}
        >
            <Input type="password" autoComplete="off" />
        </Form.Item>
    </Form>
</Modal>

上一篇：Antd 小问题汇总

Antd4.x 修改密码弹窗

Comment

Message Board