Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范.zip

# Form 表单 ### 介绍 用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。 ### 引入 ```tsx import { Form } from "@taroify/core" ``` ## 代码演示 ### 基础用法 在表单中，每个 `Form.Item` 代表一个表单项，使用 Field 的 `rules` 属性定义校验规则。 ```tsx function BasicForm() { const onSubmit = (event: BaseEventOrig<FormProps.onSubmitEventDetail>) => { Toast.open(JSON.stringify(event.detail.value)) } return ( <Form onSubmit={onSubmit}> <Toast id="toast" /> <Cell.Group inset> <Form.Item name="username" rules={[{ required: true, message: "请填写用户名" }]}> <Form.Label>用户名</Form.Label> <Form.Control> <Input placeholder="用户名" /> </Form.Control> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: "请填写密码" }]}> <Form.Label>密码</Form.Label> <Form.Control> <Input password placeholder="密码" /> </Form.Control> </Form.Item> <Field name="text" label={{ align: "left", children: "文本" }} rules={[{ required: true, message: "请填写文本" }]} > <Input placeholder="请输入文本" /> </Field> </Cell.Group> <View style={{ margin: "16px" }}> <Button shape="round" block color="primary" formType="submit"> 提交 </Button> </View> </Form> ) } ``` > Tips: 推荐可以使用`Field`组件，可以减少代码量，提高可读性 ### 校验规则 通过 `rules` 定义表单校验规则，所有可用字段见[下方表格](#rule-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84)。 ```tsx function FormWithRules() { const asyncValidator = (val: any) => new Promise<boolean>((resolve) => { Toast.loading("验证中...") setTimeout(() => { Toast.close("toast") resolve(/\d{6}/.test(val)) }, 1000) }) function onValidate(errors: FormValidError[]) { Toast.open({ style: { textAlign: "left", }, message: JSON.stringify(errors, undefined, 2), }) } return ( <Form defaultValues={{ validatorMessage: "abc" }} onValidate={onValidate}> <Toast id="toast" /> <Cell.Group inset> <Form.Item name="pattern" rules={[{ pattern: /\d{6}/, message: "请输入正确内容" }]}> <Form.Label>文本</Form.Label> <Form.Control> <Input placeholder="正则校验" /> </Form.Control> </Form.Item> <Form.Item name="validator" rules={[{ validator: (val) => /1\d{10}/.test(val), message: "请输入正确内容" }]} > <Form.Label>文本</Form.Label> <Form.Control> <Input placeholder="函数校验" /> </Form.Control> </Form.Item> <Form.Item name="validatorMessage" rules={[{ validator: (val) => `${val ?? ""} 不合法，请重新输入` }]} > <Form.Label>文本</Form.Label> <Form.Control> <Input placeholder="校验函数返回错误提示" /> </Form.Control> </Form.Item> <Form.Item name="asyncValidator" rules={[{ validator: asyncValidator, message: "请输入正确内容" }]} > <Form.Label>文本</Form.Label> <Form.Control> <Input placeholder="异步函数校验" /> </Form.Control> </Form.Item> </Cell.Group> <View style={{ margin: "16px" }}> <Button shape="round" block color="primary" formType="submit"> 提交 </Button> </View> </Form> ) } ``` ### 表单项类型 - 开关 在表单中使用 [Switch 组件](/components/switch)。 ```tsx <Form.Item name="switch"> <Form.Label>开关</Form.Label> <Form.Control> <Switch size={20} /> </Form.Control> </Form.Item> ``` ### 表单项类型 - 复选框 在表单中使用 [Checkbox 组件](/components/checkbox)。 ```tsx <Form.Item name="checkbox"> <Form.Label>复选框</Form.Label> <Form.Control> <Checkbox shape="square" /> </Form.Control> </Form.Item> <Form.Item name="checkboxGroup"> <Form.Label>复选框</Form.Label> <Form.Control> <Checkbox.Group direction="horizontal"> <Checkbox name="1" shape="square"> 复选框 1 </Checkbox> <Checkbox name="2" shape="square"> 复选框 2 </Checkbox> </Checkbox.Group> </Form.Control> </Form.Item> ``` ### 表单项类型 - 单选框 在表单中使用 [Radio 组件](/components/radio)。 ```tsx <Form.Item name="radio"> <Form.Label>单选框</Form.Label> <Form.Control> <Radio.Group direction="horizontal"> <Radio name="1">单选框 1</Radio> <Radio name="2">单选框 2</Radio> </Radio.Group> </Form.Control> </Form.Item> ``` ### 表单项类型 - 步进器 在表单中使用 [Stepper 组件](/components/stepper)。 ```tsx <Form.Item name="stepper"> <Form.Label>步进器</Form.Label> <Form.Control> <Stepper /> </Form.Control> </Form.Item> ``` ### 表单项类型 - 评分 在表单中使用 [Rate 组件](/components/rate)。 ```tsx <Form.Item name="rate"> <Form.Label>评分</Form.Label> <Form.Control> <Rate /> </Form.Control> </Form.Item> ``` ### 表单项类型 - 滑块 在表单中使用 [Slider 组件](/components/slider)。 ```tsx <Form.Item name="slider"> <Form.Label>滑块</Form.Label> <Form.Control> <Slider /> </Form.Control> </Form.Item> ``` ### 表单项类型 - 文件上传 在表单中使用 [Uploader 组件](/components/uploader)。 ```tsx function UploaderField() { const itemRef = useRef<FormItemInstance>() function onUpload() { chooseImage({ count: 1, sizeType: ["original", "compressed"], sourceType: ["album", "camera"], }).then(({ tempFiles }) => { itemRef.current?.setValue([ ...(itemRef.current?.getValue() ? [...itemRef.current?.getValue()] : []), { url: tempFiles[0].path, type: tempFiles[0].type, name: tempFiles[0].originalFileObj?.name, }, ]) }) } return ( <Form.Item ref={itemRef} name="uploader"> <Form.Label>文件上传</Form.Label> <Form.Control> <Uploader multiple maxFiles={2} onUpload={onUpload} /> </Form.Control> </Form.Item> ) } ``` ### 表单项类型 - 选择器 在表单中使用 [Picker 组件](/components/picker)。 ```tsx function PickerField() { const itemRef = useRef<FormItemInstance>() const [open, setOpen] = useState(false) return ( <> <Form.Item ref={itemRef} name="picker" isLink> <Form.Label>选择器</Form.Label> <Form.Control> <Input readonly placeholder="点击选择城市" onClick={() => setOpen(true)} /> </Form.Control> </Form.Item> <Popup mountOnEnter={false} open={open} rounded placement="bottom" onClose={setOpen}> <Picker onCancel={() => setOpen(false)} onConfirm={(newValue) => { itemRef.current?.setValue(newValue) setOpen(false) }} > <Picker.Toolbar> <Picker.Button>取消</Picker.Button> <Picker.Button>确认</Picker.Button> </Picker.Toolbar> <Picker.Column> <Picker.Option>杭州</Picker.Option> <Picker.Option>宁波</Picker.Option> <Picker.Option>温州</Picker.Option> <Picker.Option>嘉兴</Picker.Option> <Picker.Option>湖州</Picker.Option> </Picker.Column> </Picker> </Popup> </> ) } ``` ### 表单项类型 - 时间选择器 在表单中使用 [DatetimePicker 组件](/components/datetime-picker)。 ```tsx function DatetimePickerField() { const itemRef = useRef<FormItemInstance>() cons