feat: 新增form-item的validator校验和重置提示状态功能 (#689)

src/packages/form/demo.tsx

@@ -10,6 +10,7 @@ import Radio from '../radio'
 import Rate from '../rate'
 import Range from '../range'
 import Toast from '@/packages/toast'
+import { FormItemRuleWithoutValidator } from './types'
 import { FileItem, FileType } from '../uploader/uploader'
 
 interface T {
@@ -70,7 +71,7 @@ const FormDemo = () => {
       nameTip1: '请输入姓名',
       age: '年龄',
       ageTip: '请输入年龄',
-      ageTip1: '请输入年龄',
+      ageTip1: '请输入年龄，必须数字且0-200区间',
       ageTip2: '必须输入数字',
       ageTip3: '必须输入0-200区间',
       tel: '联系电话',
@@ -129,7 +130,7 @@ const FormDemo = () => {
       add: 'Add',
       remove: 'Remove',
       submit: 'Submit',
-      reset: 'Reset prompt status',
+      reset: 'Reset alert state',
       switch: 'Switch',
       checkbox: 'Checkbox',
       radiogroup: 'RadioGroup',
@@ -197,6 +198,21 @@ const FormDemo = () => {
     }
   }
 
+  // 函数校验
+  const customValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (
+    rule: FormItemRuleWithoutValidator,
+    value: string
+  ) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
+
   return (
     <>
       <div className="demo">
@@ -260,17 +276,38 @@ const FormDemo = () => {
           >
             <Input placeholder={translated.nameTip1} type="text" />
           </Form.Item>
-          <Form.Item label={translated.age} name="age">
-            <Input placeholder={translated.ageTip1} type="number" />
+          <Form.Item
+            label={translated.age}
+            name="age"
+            rules={[
+              { required: true, message: translated.ageTip },
+              { validator: customValidator, message: translated.ageTip2 },
+              { validator: valueRangeValidator, message: translated.ageTip3 },
+            ]}
+          >
+            <Input placeholder={translated.ageTip1} type="text" />
           </Form.Item>
-          <Form.Item label={translated.tel} name="tel">
+          <Form.Item
+            label={translated.tel}
+            name="tel"
+            rules={[{ required: true, message: translated.telTip }]}
+          >
             <Input placeholder={translated.telTip2} type="number" />
           </Form.Item>
-          <Form.Item label={translated.address} name="address">
+          <Form.Item
+            label={translated.address}
+            name="address"
+            rules={[{ required: true, message: translated.addressTip }]}
+          >
             <Input placeholder={translated.addressTip} type="text" />
           </Form.Item>
           <Cell>
             <input type="submit" value={translated.submit} />
+            <input
+              type="reset"
+              style={{ marginLeft: '15px' }}
+              value={translated.reset}
+            />
           </Cell>
         </Form>
 
@@ -298,6 +335,7 @@ const FormDemo = () => {
             <input type="submit" value={translated.submit} />
           </Cell>
         </Form>
+
         <h2>{translated.title4}</h2>
         <Form
           form={form}
@@ -325,6 +363,7 @@ const FormDemo = () => {
             <input type="submit" value={translated.submit} />
           </Cell>
         </Form>
+
         <h2>{translated.title5}</h2>
         <Form
           onFinish={(obj) => submitSucceed(obj)}

src/packages/form/doc.en-US.md

@@ -111,24 +111,45 @@ import  React from "react";
 import { Form, Input, Cell } from '@nutui/nutui-react';
 
 const App = () => {
+  // 函数校验
+  const customValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
   return (
     <>
       <Form
         onFinish={(obj) => submitSucceed(obj)}
         onFinishFailed={(error) => submitFailed(error)}
       >
-        <Form.Item label='Name' name="username" initialValue="zhangsan">
+        <Form.Item label='Name' name="username" rules={[{ required: true, message: 'Please enter your name' }]}>
           <Input
             className="nut-input-text"
             placeholder='Please enter your name'
             type="text"
           />
         </Form.Item>
-        <Form.Item label='Age' name="age">
-          <Input placeholder='Please enter age' type="number" defaultValue="18" />
+        <Form.Item label='Age' name="age" rules={[
+          { required: true, message: 'Please enter age' },
+          { validator: customValidator, message: 'must enter number' },
+          { validator: valueRangeValidator, message: '0-200 range must be entered' },
+        ]}>
+          <Input placeholder='Please enter the age, it must be a number and the range is 0-200' type="number" />
+        </Form.Item>
+        <Form.Item label='Tel' name="tel" rules={[{ required: true, message: 'please enter tel' }]}>
+          <Input placeholder='please enter tel' type="number" />
+        </Form.Item>
+        <Form.Item label='Address' name="address" rules={[{ required: true, message: 'Please enter address' }]}>
+          <Input placeholder='Please enter address' type="text" />
         </Form.Item>
         <Cell>
           <input type="submit" value='Submit' />
+          <input type="reset" style={{ marginLeft: '15px' }}
+            value="Reset notification status"
+          />
         </Cell>
       </Form>
     </>
@@ -283,6 +304,7 @@ Form.useForm() creates a Form instance, which is used to manage all data states.
 |-------------------|-----------------------------|-----|---------|
 | getFieldValue | Get the value of the corresponding field name | - | (name: NamePath) => any |
 | setFieldsValue | Set the value of the form | - | (values) => void |
+| resetFields`1.4.8` | Reset form prompt state | - | () => void |
 | submit | the function of submit the form | - | Promise |
 
 

src/packages/form/doc.md

@@ -78,37 +78,51 @@ import  React from "react";
 import { Form, Input, Cell } from '@nutui/nutui-react';
 
 const App = () => {
+  // 函数校验
+  const customValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
   return (
     <>
       <Form
         onFinish={(obj) => submitSucceed(obj)}
         onFinishFailed={(error) => submitFailed(error)}
       >
-        <Form.Item label='姓名' name="username">
+        <Form.Item label='姓名' name="username" rules={[{ required: true, message: '请输入姓名' }]}>
           <Input
             className="nut-input-text"
             placeholder='请输入姓名'
             type="text"
           />
         </Form.Item>
-        <Form.Item label='年龄' name="age">
-          <Input placeholder='请填写年龄' type="number" />
+        <Form.Item label='年龄' name="age" rules={[
+          { required: true, message: '请输入年龄' },
+          { validator: customValidator, message: '必须输入数字' },
+          { validator: valueRangeValidator, message: '必须输入0-200区间' },
+        ]}>
+          <Input placeholder='请输入年龄，必须数字且0-200区间' type="number" />
         </Form.Item>
-        <Form.Item label='联系电话' name="tel">
+        <Form.Item label='联系电话' name="tel" rules={[{ required: true, message: '请输入联系电话' }]}>
           <Input placeholder='请填写联系电话' type="number" />
         </Form.Item>
-        <Form.Item label='地址' name="address">
+        <Form.Item label='地址' name="address" rules={[{ required: true, message: '请输入地址' }]}>
           <Input placeholder='请填写地址' type="text" />
         </Form.Item>
         <Cell>
           <input type="submit" value='提交' />
+          <input type="reset" style={{ marginLeft: '15px' }}
+            value="重置提示状态"
+          />
         </Cell>
       </Form>
     </>
   )
 }
 
-
 export default App;
 ```
 :::
@@ -302,6 +316,7 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 |-------------------|-----------------------------|-----|---------|
 | getFieldValue | 获取对应字段名的值 | - | (name: NamePath) => any |
 | setFieldsValue | 设置表单的值 | - | (values) => void |
+| resetFields`1.4.8` | 重置表单提示状态 | - | () => void |
 | submit | 提交表单进行校验的方法 | - | Promise |
 
 

src/packages/form/form.scss

@@ -2,17 +2,20 @@
   text-align: right;
   font-size: 14px;
   padding-right: 24px;
+  white-space: nowrap;
 }
 
 .form-layout-left .nut-form-item__label {
   text-align: left;
   font-size: 14px;
   padding-right: 24px;
+  white-space: nowrap;
 }
 
 .form-layout-top .nut-form-item {
   flex-direction: column;
   align-items: flex-start;
+  white-space: nowrap;
 }
 
 .form-layout-top .nut-form-item__label {

src/packages/form/form.tsx

@@ -51,7 +51,7 @@ export const Form: FunctionComponent<
   }
 
   formInstance.starPositon = starPositon
-  const { setCallback, submit } = formInstance
+  const { setCallback, submit, resetFields } = formInstance
 
   setCallback({
     onFinish,
@@ -66,6 +66,10 @@ export const Form: FunctionComponent<
         e.preventDefault()
         submit()
       }}
+      onReset={(e) => {
+        e.preventDefault()
+        resetFields()
+      }}
       // {...rest}
     >
       <CellGroup>

src/packages/form/useForm.ts

@@ -116,7 +116,13 @@ class FormStore {
     }
   }
 
-  resetFields = () => {}
+  resetFields = () => {
+    this.errList.length = 0
+
+    this.fieldEntities.forEach((enetity: FieldEntity) => {
+      enetity.onStoreChange()
+    })
+  }
 
   getForm = () => {
     return {
@@ -124,6 +130,7 @@ class FormStore {
       registerField: this.registerField,
       getFieldValue: this.getFieldValue,
       setFieldsValue: this.setFieldsValue,
+      resetFields: this.resetFields,
       submit: this.submit,
       store: this.store,
       errList: this.errList,

src/packages/formitem/types.ts

@@ -32,8 +32,8 @@ export interface FormItemRuleWithoutValidator {
 }
 export interface FormItemRule extends FormItemRuleWithoutValidator {
   validator?: (
-    value: any,
-    ruleCfg: FormItemRuleWithoutValidator
+    ruleCfg: FormItemRuleWithoutValidator,
+    value: string
   ) => boolean | string | Promise<boolean | string>
 }