async Validate setting message value.

liwan11123123 commented 6 years ago

使用了你的这个项目。 {getFieldDecorator('confirm', { rules: [ { required: true, pattern: /^[0-9a-zA-Z!@#$%^&*(){}:"|>?[];,.\/-=_+]{6,16}$/, message:

{this.errMsg}

} ] })( <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} maxLength={16} onKeyUp={this.passwordEquar} type="password" placeholder="确认密码" /> )}

我想校验两次密码是否相同。 errMsg 在使用setstate设置值无效。是因为setstate 是异步的缘故？

passwordEquar = (e: React.FormEvent): void => { e.preventDefault() let form = this.props.form if (!form.getFieldError('confirm')) { if (form.getFieldValue('password') !== form.getFieldValue('confirm')) { console.log('密码不一致') this.setState({ errMsg: '密码不一致' }) } } }

liwan11123123 commented 6 years ago

jackple commented 6 years ago

@liwan11123123 , 你可以修改触发的事件来实现

liwan11123123 commented 6 years ago

import * as React from 'react' import { inject, observer } from 'mobx-react' import { observable, runInAction, action } from 'mobx' import { Form, Icon, Input, Button } from 'antd' import { FormComponentProps } from 'antd/lib/form'

import * as styles from './index.scss'

const FormItem = Form.Item

interface IStoreProps { routerStore?: RouterStore resetPassword?: (data: IAuthStore.resetPasswordParams) => Promise verifyCode?: (data: IAuthStore.VerifyCodeParams) => Promise sendCode?: (data: IAuthStore.sendCodeParams) => Promise verification_token?: string }

@inject( (store: IStore): IStoreProps => { const { routerStore, authStore } = store const { resetPassword, verifyCode, sendCode, verification_token } = authStore return { routerStore, resetPassword, verifyCode, sendCode, verification_token } } ) @observer class ForgetPwd extends React.Component<IStoreProps & FormComponentProps> { @observable private loading: boolean = false

count = 0
errMsg: string = '密码为6-16位且不能包含中文等字符'

forgetPasswd = (): void => {
    const { routerStore } = this.props
    routerStore.push('/forgetpwd')
}

gotoLogin = (): void => {
    const { routerStore } = this.props
    routerStore.push('/login')
}

submit = (e: React.FormEvent<any>): void => {
    e.preventDefault()
    this.props.form.validateFields(
        async (err, values): Promise<any> => {
            if (!err) {
                runInAction('SHOW_LOGIN_LOADING', () => {
                    this.loading = true
                })
                await this.props.resetPassword({
                    password: values.password,
                    verification_token: this.props.verification_token
                })
                runInAction('HIDE_LOGIN_LOADING', () => {
                    this.loading = false
                })
            }
        }
    )
}

verifyCode = (e: React.FormEvent<any>): void => {
    e.preventDefault()
    this.props.verifyCode({
        phone: this.props.form.getFieldValue('phone'),
        region: 86,
        code: this.props.form.getFieldValue('code')
    })
}

passwordEquar = (e: React.FormEvent<any>): void => {
    e.preventDefault()
    let form = this.props.form
    if (!form.getFieldError('confirm')) {
        if (form.getFieldValue('password') !== form.getFieldValue('confirm')) {
            console.log('密码不一致')
            this.setState({
                errMsg: '密码不一致'
            })
        }
    }
}

sendCode = (e: React.FormEvent<any>): void => {
    e.preventDefault()
    if (this.count > 0) return;
    this.count = 60
    let c = setInterval(() => {
        this.setState({
            count: this.count -= 1
        })
        if (this.count <= 0) clearInterval(c);
    }, 1000);
    this.props.sendCode({
        phone: this.props.form.getFieldValue('phone'),
        region: 86,
    })
}

render() {
    const { getFieldDecorator } = this.props.form
    return (
        <div className={styles.login}>
            <Form onSubmit={this.submit} className={styles.form}>
                <div className={styles.logoBox}>
                    <Icon type="ant-design" />
                </div>
                <FormItem className={styles.formBox} hasFeedback>
                    {getFieldDecorator('phone', {
                        rules: [
                            {
                                required: true,
                                pattern: /^(1[3-9][0-9]{9,9})$|^(9[0-4|9][0-9]{8,8})$/,
                                message: '手机号不能为空且不能输入非法的手机号'
                            }
                        ]
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            maxLength={11}
                            placeholder="手机号"
                        />
                    )}
                </FormItem>
                <div className={styles.flexbox}>
                    <FormItem className={styles.formBox} hasFeedback>
                        {getFieldDecorator('code', {
                            rules: [
                                {
                                    required: true,
                                    pattern: /^\d{6}$/,
                                    message: '验证码为6位数字'
                                }
                            ]
                        })(
                            <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                onBlur={this.verifyCode}
                                maxLength={6}
                                placeholder="短信验证码"
                            />
                        )}

                    </FormItem>
                    <Button
                        className={styles.btn}
                        type="primary"
                        onClick={this.sendCode}
                        disabled={this.count}
                    >
                        {this.count ? this.count + 's' : '获取验证码'}
                    </Button>
                </div>
                <FormItem className={styles.formBox} hasFeedback>
                    {getFieldDecorator('password', {
                        rules: [
                            {
                                required: true,
                                pattern: /^[0-9a-zA-Z!@#$%^&amp;*(){}:&quot;|>?\[\];,.\/\-=_+]{6,16}$/,
                                message: '密码为6-16位且不能包含中文等字符'
                            }
                        ]
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            maxLength={16}
                            type="password"
                            placeholder="密码"
                        />
                    )}
                </FormItem>
                <FormItem className={styles.formBox} hasFeedback>
                    {getFieldDecorator('confirm', {
                        rules: [
                            {
                                required: true,
                                pattern: /^[0-9a-zA-Z!@#$%^&amp;*(){}:&quot;|>?\[\];,.\/\-=_+]{6,16}$/,
                                message: <div>{this.errMsg}</div>
                            }
                        ]
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            maxLength={16}
                            onKeyUp={this.passwordEquar}
                            type="password"
                            placeholder="确认密码"
                        />
                    )}
                </FormItem>
                <FormItem className={styles.formBox}>
                    <Button htmlType="submit" block loading={this.loading}>
                        确认
                    </Button>
                </FormItem>
                <FormItem className={styles.formBox}>
                    <div className={styles.flexbox}>
                        <div></div>
                        <div onClick={this.gotoLogin} className={styles.span}>已有账号，立即登录</div>
                    </div>
                </FormItem>
            </Form>
        </div>
    )
}

}

export default Form.create<{}>()(ForgetPwd)

liwan11123123 commented 6 years ago

我只能给一个这个文件，可以给一个在线code的演示地址吗？。因为我不会配您这个框架的架构。比如codepen这样的在线测试网站

jackple commented 6 years ago

@liwan11123123 试试其中的二次验证密码字段修改成:

<FormItem className={styles.formBox} hasFeedback>
    {getFieldDecorator('confirm', {
        rules: [
            {
                required: true,
                // changed here
                trigger: 'blur',
                pattern: /^[0-9a-zA-Z!@#$%^&amp;*(){}:&quot;|>?\[\];,.\/\-=_+]{6,16}$/,
                message: <div>{this.errMsg}</div>
            }
        ]
    })(
        <Input
            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
            maxLength={16}
            onKeyUp={this.passwordEquar}
            type="password"
            placeholder="确认密码"
        />
    )}
</FormItem>

liwan11123123 commented 6 years ago

我尝试了这个修改，不起作用。

我只是想在确认密码不一致的时候替换一下errMsg的值。是否是因为setstate 是异步的缘故？

liwan11123123 commented 6 years ago

jackple commented 6 years ago

@liwan11123123 一时看漏眼, 兄弟, 你这里应该用this.state.errMsg

liwan11123123 commented 6 years ago

嗯嗯，还是谢谢，突然发现 message 只是针对 pattern 的校验给出的提示。想了一下还是外部再写一个div 去做判断比较好。

YDJ-FE / ts-react-vite_or_webpack

async Validate setting message value. #8