---
order: 4
zh-CN:
	title: 表单校验
	name: 昵称
	namedescription: 正则校验
	nameValidationError1: 请填写昵称
	nameValidationError2: 昵称只能是字母
	password: 密码
	pwdescription: 非空校验
	pwValidationError: 请填写密码
	comfirmPw: 确认密码
	comfirmPwdescription: 自定义校验函数
	comfirmValidatiaonError: 两次填写的密码不一致
	email: 邮件
	emailHelodesc: 邮件校验
	emailValidationError: 请填写正确的邮件
	url: 个人网站链接
	urldescription: 超链接校验
	urlValidationError: 请填写正确的网址
	id: 证件号码
	iddescription: 自定义校验函数
	idValidationError1: 证件号码必须是数字
	idValidationError2: 证件号码是10位或者15位数字
	hobbies: 兴趣标签
	hobbiesdescription: 长度校验
	hobbiesValidationError: 请至少选择两个
	hobbiesText1: 电影
	hobbiesText2: 书籍
	hobbiesText3: 旅行
	remark: 备注
	remarkDesc: 文本输入
	remarkValidationError: 备注不能超过10个字符
	singleUploadText: 单文件上传
	singleUploadTips: 文件大小不超过 2M
	singleUploadValidationError: 请上传文件
	uploadText: 文件上传
	uploadTips: 单个文件不超过 2M
	uploadValidationError: 请上传文件
	imageUploadText: 图片文件上传
	imageUploadTips: 单个文件不超过 2M
	imageUploadValidationError: 请上传图片
	submit: 获取表单值
	reset: 重置表单值
en-US:
	title: Common valiations of form
	name: Name
	namedescription: regular validation
	nameValidationError1: Please enter the name.
	nameValidationError2: Name can only be letters.
	password: Password
	pwdescription: non-empty validation
	pwValidationError: Please enter the password.
	comfirmPw: Comfirm password
	comfirmPwdescription: validations of comparing with other field
	comfirmValidatiaonError: The password you enter the second time is not the same as the one you first filled in.
	email: Email
	emailHelodesc: validation of email
	emailValidationError: Please enter the right email.
	url: Personal website
	urldescription: validation of website link
	urlValidationError: Please enter the right website link.
	id: ID Number
	iddescription: custom validations
	idValidationError1: ID number can only be numbers.
	idValidationError2: ID number is 10 or 15 digits.
	hobbies: hobbies
	hobbiesdescription: length validation
	hobbiesValidationError: Please select at least two hobbies.
	hobbiesText1: movie
	hobbiesText2: book
	hobbiesText3: travel
	remark: remark
	remarkDesc: remark（textarea）
	remarkValidationError: Please input no more than 10 words.
	singleUploadText: Single file upload
  singleUploadTips: File size no more than 2M
	singleUploadValidationError: Please upload file.
	uploadText: Files upload
	uploadTips: Single File no more than 2M
	uploadValidationError: Please upload file.
	imageUploadText: Image files upload
	imageUploadTips: Single File no more than 2M
	imageUploadValidationError: Please upload image.
	submit: submit
	reset: reset
---

```jsx
import {
	Form,
	FormStrategy,
	Radio,
	Checkbox,
	Notify,
	Validators,
	FormNumberInputField,
	FormInputField,
	FormSingleUploadField,
} from 'zent';

/**
 * 自定义表单校验，内置组件接受 renderError 参数，若不传默认会显示 message
 */
function equalsPassword(value, ctx) {
	if (value !== ctx.getSectionValue('password').password) {
		return {
			name: 'passwordEqual',
			message: '{i18n.comfirmValidatiaonError}',
		};
	}
	return null;
}

function idLength(value) {
	if (value.length !== 10 && value.length !== 15) {
		return {
			name: 'idLength',
			message: '{i18n.idValidationError2}',
		};
	}
}

function App() {
	const form = Form.useForm(FormStrategy.View);
	const resetForm = useCallback(() => {
		form.resetValue();
	}, [form]);
	const onSubmit = React.useCallback(form => {
		const value = form.getValue();
		console.log(value)
	}, []);
	return (
		<Form
			form={form}
			layout="vertical"
			scrollToError
			onSubmit={onSubmit}
		>
			<FormInputField
				name="name"
				label="{i18n.name}："
				required
				helpDesc="{i18n.namedescription}"
				validators={[
					Validators.required('{i18n.nameValidationError1}'),
					Validators.pattern(/^[a-zA-Z]+$/, '{i18n.nameValidationError2}'),
				]}
			/>
			<FormInputField
				name="password"
				label="{i18n.password}："
				required
				helpDesc="{i18n.pwdescription}"
				validators={[Validators.required('{i18n.pwValidationError}')]}
				props={{
					type: 'password',
				}}
			/>
			<FormInputField
				name="confirmPw"
				label="{i18n.comfirmPw}："
				required
				helpDesc="{i18n.comfirmPwdescription}"
				validators={[equalsPassword]}
				props={{
					type: 'password',
				}}
			/>
			<FormInputField
				name="email"
				label="{i18n.email}："
				helpDesc="{i18n.emailHelodesc}"
				validators={[Validators.email('{i18n.emailValidationError}')]}
			/>
			<FormInputField
				name="remark"
				label="{i18n.remark}："
				helpDesc="{i18n.remarkDesc}"
				props={{ type: 'textarea', showCount: true, maxCharacterCount: 10 }}
				validators={[Validators.maxLength(10, '{i18n.remarkValidationError}')]}
			/>
			<FormNumberInputField
				name="id"
				label="{i18n.id}："
				required
				helpDesc="{i18n.iddescription}"
				validators={[idLength]}
			/>
			<FormCheckboxGroupField
				name="hobbies"
				label="{i18n.hobbies}："
				required
				helpDesc="{i18n.hobbiesdescription}"
				validators={[Validators.minLength(2, '{i18n.hobbiesValidationError}')]}
			>
				<Checkbox value="movie">{i18n.hobbiesText1}</Checkbox>
				<Checkbox value="book">{i18n.hobbiesText2}</Checkbox>
				<Checkbox value="travel">{i18n.hobbiesText3}</Checkbox>
			</FormCheckboxGroupField>
			<FormSingleUploadField
				name="singleFile"
				label="{i18n.singleUploadText}："
				props={{
					tips: '{i18n.singleUploadTips}',
					maxSize: 1024 * 1024 * 2,
				}}
				validators={[Validators.required('{i18n.singleUploadValidationError}')]}
			/>
			<FormUploadField
				name="upload"
				label="{i18n.uploadText}："
				props={{
					tips: '{i18n.uploadTips}',
					maxAmount: 9,
					maxSize: 1024 * 1024 * 2,
				}}
				validators={[Validators.minLength(1, '{i18n.uploadValidationError}')]}
			/>
			<FormImageUploadField
				name="imageUpload"
				label="{i18n.imageUploadText}："
				props={{
					tips: '{i18n.imageUploadTips}',
					maxAmount: 9,
					maxSize: 1024 * 1024 * 2,
				}}
				validators={[Validators.minLength(1, '{i18n.imageUploadValidationError}')]}
			/>
			<div className="zent-form-actions">
				<Button type="primary" htmlType="submit">
					{i18n.submit}
				</Button>
				<Button type="primary" outline onClick={resetForm}>
					{i18n.reset}
				</Button>
			</div>
		</Form>
	);
}

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