zent/src/form/demos/6.validator-middleware.md

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

---
order: 6
zh-CN:
	title: 校验中间件
	enableNotify: 启用短信通知
	requiredCellPhone: 请填写手机号
	requiredTelephone: 请填写联系方式
	required11: 请填写11位手机号
	cellPhone: 手机号
	contact: 联系方式
en-US:
	title: Validator Middlewares
	enableNotify: Enable Message Notify
	requiredCellPhone: Please input your cell-phone number
	requiredTelephone: Please input your contacts
	required11: Please input 11-digit cell-phone number
	cellPhone: Cell-Phone Number
	contact: Contacts
---

```jsx
import {
	Form,
	FormStrategy,
	Validators,
	ValidatorMiddlewares,
	FormInputField,
	FormSwitchField,
} from 'zent';

const { FieldValue } = Form;

function App() {
	const form = Form.useForm(FormStrategy.View);

	return (
		<Form form={form} layout="vertical" scrollToError>
			<FormSwitchField label="{i18n.enableNotify}：" name="shouldNotify" />
			<FieldValue name="shouldNotify">
				{shouldNotify => (
					<FormInputField
						name="contact"
						label={
							(shouldNotify ? '{i18n.cellPhone}' : '{i18n.contact}') + '：'
						}
						required
						validators={[
							ValidatorMiddlewares.message(ctx => {
								return ctx.getFormValue().shouldNotify
									? '{i18n.requiredCellPhone}'
									: '{i18n.requiredTelephone}';
							})(Validators.required('123')),
							ValidatorMiddlewares.when(
								ctx => ctx.getFormValue()?.shouldNotify
							)(Validators.pattern(/^\d{11}$/, '{i18n.required11}')),
						]}
					/>
				)}
			</FieldValue>
		</Form>
	);
}

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

```

```