Ant Design Mobile中的表單校驗

將validator放在 rules 對象中

<Form.Itemname='uName'label='姓名'requiredrules={[{required: true, message: '請輸入姓名'},{validator: (rule, value, cb) => checkName(rule, value, cb)},]}><Inputplaceholder='輸入受益人姓名'/></Form.Item>

自定義校驗方法?

const checkName = (rule: any, value: any, cb: any) => {return new Promise((resolve, reject) => {if (!/^[\u3400-\u4DB5?]{2,25}$/g.test(name)) {reject('請輸入正確姓名')} else {resolve('')}})}

Form.Item中的trigger屬性默認綁定是?onChange 方法

根據 組件 監聽事件 修改 Form.Item 監聽事件

<Form.Itemname='birthday'label='生日'trigger='onConfirm'onClick={() => {setPickerVisible(true)}}><DatePickervisible={pickerVisible}onClose={() => {setPickerVisible(false)}}>{value =>value ? dayjs(value).format('YYYY-MM-DD') : '請選擇日期'}</DatePicker></Form.Item>

總結

以上是生活随笔為你收集整理的react-hooks+Ant Design Mobile中的自定义表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。