ant-design中的form组件使用方法记录

1.自定义校验规则

有时候需要自定义输入框的校验规则,需要设置验证函数。

function check(rule, value, callback){
    let pattern=/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/;
    if(!pattern.test(value)){
        callback("IP格式不正确")
    }else{
        callback()
    }
}
<FormItem
    {...formItemLayout}
    label="源IP-源端口"
>
    <Col span={12}>
        {getFieldDecorator('origip', {
            rules: [{
                required: true, message: '源IP必填',
            },{
                validator:check,
            }],
        })(
            <Input />
        )}
    </Col>
</FormItem>

2.对比两个输入框的值

用在确认密码输入时。

let checkPass2= (rule, value, callback)=> {
    const {getFieldValue} = form;
    if (value && value !== getFieldValue('userpassword')) {
        callback('两次输入密码不一致!');
    } else {
        callback();
    }
}
<FormItem
    label="新密码确认"
    {...formItemLayout}
>
    {getFieldDecorator('userpassword2', {
        rules: [
            { required: true, message: '请再确认新密码!' },
            { validator: checkPass2}
        ],
    })(
        <Input />
    )}
</FormItem>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容