zent/src/form/demos/5.async-validate.md

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

---
order: 5
zh-CN:
	title: 异步校验
	name: 昵称
	nameValidationError1: 请填写昵称
	nameValidationError2: 昵称只能是字母
	validate: 校验表单
	reset: 重置表单值
en-US:
	title: Common valiations of form
	name: Name
	nameValidationError1: Please enter the name.
	nameValidationError2: Name can only be letters. 
	validate: Validate
	reset: reset 
---

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

const { ValidateOption } = Form;

const asyncValidator = Form.createAsyncValidator(
	() =>
		new Promise(resolve => {
			setTimeout(() => {
				resolve({
					name: 'async',
					message: 'from async validator',
				});
			}, 100);
		})
);

function getValidateOption(source) {
	if (source === 'blur') {
		return ValidateOption.IncludeAsync;
	}
}

function App() {
	const form = Form.useForm(FormStrategy.View);
	const resetForm = useCallback(() => {
		form.resetValue();
	}, [form]);
	const validateForm = useCallback(() => {
		form
			// 不传参数直接调用 validate() 等价于 
			// validate(ValidateOption.Default | ValidateOption.IncludeChildrenRecursively)
			.validate(
				ValidateOption.Default |
					ValidateOption.IncludeAsync |
					ValidateOption.IncludeUntouched |
					ValidateOption.IncludeChildrenRecursively
			)
			.then(() => {
				Notify.success(`Validate finished: ${form.isValid()}`);
			});
	}, [form]);
	return (
		<Form form={form} layout="vertical" scrollToError>
			<FormInputField
				name="name"
				label="{i18n.name}："
				required
				getValidateOption={getValidateOption}
				validators={[
					Validators.required('{i18n.nameValidationError1}'),
					Validators.pattern(/^[a-zA-Z]+$/, '{i18n.nameValidationError2}'),
					asyncValidator,
				]}
			/>
			<div className="zent-form-actions">
				<Button type="primary" onClick={validateForm}>
					{i18n.validate}
				</Button>
				<Button type="primary" outline onClick={resetForm}>
					{i18n.reset}
				</Button>
			</div>
		</Form>
	);
}

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