修改前:
修改后:
代码片段:
<Form name="basic5" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} size="large" form={form} labelCol={{ style: { width: ‘100%‘, height: ‘30px‘ } }} //label样式 labelAlign="left" //label样式 > <Form.Item name="username" validateFirst label="新手机号" rules={[ { required: true, message: ‘请输入手机号‘ }, { validator: (_, value) => { return validate.phone(value) ? Promise.resolve() : Promise.reject(‘手机号格式错误‘); } } ]} > <Input maxLength={11} placeholder="请输入手机号" allowClear style={{ borderTop: ‘none‘, borderLeft: ‘none‘, borderRight: ‘none‘ }} /> </Form.Item> <Form.Item name="code" validateFirst rules={[ { required: true, message: ‘请输入验证码‘ }, { required: true, validator: (_, value) => { return validate.onlyNum(value) ? Promise.resolve() : Promise.reject(‘请输入4位纯数字验证码‘); } } ]} label="验证码" > <Input className="captcha-input" placeholder="请输入验证码" style={{ borderTop: ‘none‘, borderLeft: ‘none‘, borderRight: ‘none‘ }} suffix={ <Button className="captcha" style={{ background: ‘transparent‘, outline: ‘none‘ }} disabled={disabled} onClick={getCodes} > 获取验证码 </Button> } /> </Form.Item> /> </Form>;
antd 将form表单中的label换行。form表单中的input框只有border-bottom
原文:https://www.cnblogs.com/cocozj945/p/14692750.html