zent/src/form/demos/1.basic.md

一套前端设计语言和基于React的实现

---
order: 1
zh-CN:
	title: 基础用法
	name: 用户名
	nameTip: 用户名用于个人账号登录
	nameHelpdesc: 用户名为5-25个字
	nameMinLength: 用户名至少 5 个字
	nameMaxLength: 用户名最多 25 个字
	password: 密码
	pwHelpDesc: 密码由英文字母、数字组成
	passwordPattern: 只允许英文字母和数字
	link: 查看更多
	notice: 重要提示：填写后无法修改，请谨慎设置
	required: 必填
	email: 请输入正确的邮箱
	disable: 禁用表单
	enable: 解除禁用
	initialize: 初始化表单数据
	reset: 重置
	clear: 清空
en-US:
	title: Basic usage
	name: User Name
	nameTip: User name is used for personal login
	nameHelpdesc: User name is 5-25 characters
	nameMinLength: User name is at least 5 characters long
	nameMaxLength: User name is at most 25 characters long
	password: Password
	pwHelpDesc: Password consists of letters and numbers
	passwordPattern: Only letters and numbers
	link: Watch more.
	notice: Notice that user name and password cannot be modified after submitting. Please submit carefully.
	required: Required
	email: Invalid email
	disable: Disable
	enable: Enable
	initialize: Initialize
	reset: Reset
	clear: Clear
---

```jsx
import {
	FormInputField,
	Form,
	FormStrategy,
	Validators,
	Pop,
	Icon,
	ButtonDirective,
} from 'zent';

function Component() {
	const form = Form.useForm(FormStrategy.View);
	const [disabled, setDisabled] = React.useState(false);
	const [initializing, setInitializing] = React.useState(false);
	const initialize = React.useCallback(() => {
		setInitializing(true);
		setTimeout(() => {
			form.initialize({
				name: 'zent',
				password: 'zenttnez',
				email: 'zent@youzan.com',
			});
			setInitializing(false);
		}, 1000);
	}, [form]);

	return (
		<>
			<Form layout="vertical" form={form} disabled={disabled}>
				<FormInputField
					name="name"
					label={
						<span>
							{i18n.name}&nbsp;
							<Pop trigger="hover" content="{i18n.nameTip}" centerArrow>
								<Icon type="info-circle-o" />
							</Pop>：
						</span>
					}
					validators={[
						Validators.minLength(5, '{i18n.nameMinLength}'),
						Validators.maxLength(25, '{i18n.nameMaxLength}'),
					]}
					helpDesc="{i18n.nameHelpdesc}"
					required="{i18n.required}"
				/>
				<FormInputField
					name="password"
					props={{ type: 'password' }}
					label="{i18n.password}："
					helpDesc={
						<span>
							{i18n.pwHelpDesc}
							<a href="https://youzan.com" target="_blank">
								{i18n.link}
							</a>
						</span>
					}
					validateOccasion={
						Form.ValidateOccasion.Blur | Form.ValidateOccasion.Change
					}
					validators={[
						Validators.pattern(/^[a-zA-Z0-9]+$/, '{i18n.passwordPattern}'),
					]}
					notice="{i18n.notice}"
					required="{i18n.required}"
				/>
				<FormInputField
					className="demo-form-basic-email"
					label="E-Mail："
					name="email"
					validators={[
						Validators.required('{i18n.required}'),
						Validators.email('{i18n.email}'),
					]}
				/>
				<Button htmlType="reset">{i18n.reset}</Button>
				<Button onClick={form.model.clear.bind(form.model)}>
					{i18n.clear}
				</Button>
				<Button loading={initializing} onClick={initialize}>
					{i18n.initialize}
				</Button>
				<Button onClick={() => form.model.clearError()}>清空错误信息</Button>
			</Form>
			<Button
				style={{ marginTop: 24 }}
				onClick={() => setDisabled(prev => !prev)}
			>
				{disabled ? '{i18n.enable}' : '{i18n.disable}'}
			</Button>
		</>
	);
}

ReactDOM.render(<Component />, mountNode);
```

<style>
.demo-form-basic-email {
	margin-left: 5px;
}
</style>