64 lines
2.5 KiB
JavaScript
64 lines
2.5 KiB
JavaScript
import { Divider, Form, Input } from "antd"
|
||
import { Fragment } from "react"
|
||
import './index.scss';
|
||
|
||
export const prefix = (iconfontName) => <Fragment><i className={`iconfont mr7 colorABA ${iconfontName}`} /><Divider type="vertical" /></Fragment>
|
||
|
||
export default ({getFieldDecorator, type}) => {
|
||
return <div className="loginRegisterFormItem">
|
||
<Form.Item label="用户名">
|
||
{getFieldDecorator('register_username', {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入用户名"
|
||
},
|
||
{
|
||
pattern: /^[a-zA-Z][a-zA-Z0-9]{3,13}$/,
|
||
message: '用户名必须为4-14位，以字母开头，只能包含字母和数字',
|
||
}
|
||
],
|
||
validateTrigger: "onBlur",
|
||
})(<Input size="large" placeholder="请输入4-14位用户名，以字母开头，只能使用字母、数字" prefix={prefix("icon-yonghuming")} />)}
|
||
</Form.Item>
|
||
{type === "registerByPhone" ? <Form.Item label="手机号">
|
||
{getFieldDecorator('phone', {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入手机号码"
|
||
},
|
||
{ pattern: /(^|\s*\+?0?0?86|\D)(1\d{2})[-\s]{0,3}(\d{4})[-\s]{0,3}(\d{4})(?=\D|$)/, message: "请输入正确的手机号码" }
|
||
],
|
||
validateTrigger: "onBlur",
|
||
})(<Input size="large" placeholder="请输入11位数的手机号码" prefix={prefix("icon-shoujihao")} />)}
|
||
</Form.Item> : <Form.Item label="邮箱号">
|
||
{getFieldDecorator('email', {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入邮箱号"
|
||
},
|
||
{ pattern: /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: "请输入正确的邮箱号" }
|
||
],
|
||
validateTrigger: "onBlur",
|
||
validateFirst: true,
|
||
})(<Input size="large" placeholder="请输入邮箱号" prefix={prefix("icon-youxiang2")} />)}
|
||
</Form.Item>}
|
||
<Form.Item label="密码">
|
||
{getFieldDecorator('password', {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入登录密码"
|
||
},
|
||
{
|
||
pattern: /^[^\s]{8,16}$/,
|
||
message: '密码必须为8-16位且不能包含空格',
|
||
}
|
||
],
|
||
validateTrigger: "onBlur",
|
||
})(<Input.Password size="large" placeholder="请输入8-16位密码,区分大小写,不能使用空格" prefix={prefix("icon-mima")} />)}
|
||
</Form.Item>
|
||
</div>
|
||
} |