fix(Form): 新增验证功能

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -4,7 +4,17 @@ import Layout, {Container} from '../../Layout';
 const {Body, Footer} = Layout;
 
 const FormDemo = () => {
-  const items = [{type: 'input', label: 'name'}];
+  const items = [
+    {
+      type: 'input',
+      field: 'name',
+      validate: (val: any) => (!val ? `请输入name` : ''),
+    },
+    {
+      type: 'input',
+      field: 'age',
+    },
+  ];
 
   const initialValues = {name: '王滴滴'};
 

packages/core/package.json

@@ -61,7 +61,8 @@
     "prop-types": "15.7.2",
     "react-native-gesture-handler": "2.0.0",
     "react-native-root-siblings": "4.1.1",
-    "react-native-svg": "12.1.1"
+    "react-native-svg": "12.1.1",
+    "@validator.tool/hook":"2.2.4"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

packages/core/src/Form/formItems.tsx

@@ -1,20 +1,47 @@
 import React, { FC, useContext } from 'react';
-import { FormProps } from './types';
+import { FormProps, KeyType, FormItemsProps } from './types';
 import { Context } from './hooks/context';
 import Input from '../Input';
+import { View, Text } from 'react-native';
+import { useValidator } from '@validator.tool/hook';
 
-const FormItems: FC<FormProps & any> = ({ formDatas = [], initialValues = {} }) => {
+const FormItems: FC<FormProps> = ({ formDatas = [] }) => {
   const { innerMethods } = useContext(Context);
 
   const formValues = innerMethods.innerGetStore();
 
-  const change = (field: string, value: any) => innerMethods?.innerUpdateStore(field, value);
+  const { validator, forceUpdate } = useValidator({
+    initValues: { ...formValues },
+  });
+
+  const change = (field: KeyType, value: any) => innerMethods?.innerUpdateStore(field, value);
 
   const _render = () => {
-    return formDatas.map((v: any, i: number) => {
+    return formDatas.map((v: FormItemsProps, i: number) => {
+      let _render;
       if (v.type === 'input') {
-        return <Input key={i} value={formValues[v.label]} onChangeText={(value) => change(v.label, value)} />;
+        _render = (
+          <Input
+            value={formValues[v.field]}
+            onChangeText={(value) => change(v.field, value)}
+            onBlur={() => {
+              validator.showMessages();
+              forceUpdate();
+              console.log('validator', validator);
+            }}
+          />
+        );
       }
+      return (
+        <View key={i}>
+          {_render}
+          <Text style={{ color: 'red' }}>
+            {validator.message(v.field, formValues[v.field], {
+              validate: v?.validate,
+            })}
+          </Text>
+        </View>
+      );
     });
   };
 

packages/core/src/Form/hooks/store.ts

@@ -27,7 +27,7 @@ class Store<FormData = any, FieldValue = FormData[keyof FormData], FieldKey exte
     return cloneDeep(get(this.store, field));
   };
 
-  public getStore = () => {
+  public getStore = (): Partial<FormData> => {
     return this.store;
   };
 }

packages/core/src/Form/types/index.tsx

@@ -1,4 +1,5 @@
 import Store from '../hooks/store';
+import { RulesOption } from '@validator.tool/hook';
 
 type KeyType = string | number | symbol;
 
@@ -23,8 +24,9 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
 }
 
 interface FormItemsProps {
-  label: string;
+  field: string;
   type: string;
+  validate?: RulesOption['validate'];
 }
 
 export type { FormProps, FormItemsProps, KeyType, FormInstance };

yarn.lock

@@ -5040,6 +5040,13 @@
   resolved "https://registry.yarnpkg.com/@uiw/utils/-/utils-4.21.14.tgz#e4f836bc52c386784c508e401391040b85de6ded"
   integrity sha512-0A9pEbUqMFjccpJTOR2Tv6DlhSSmiNpJ2gSTlU0IHjDA6Phatl7Eh65fSxZyZiiigjH6EFhCj/hqmwOOIbF5hg==
 
+"@validator.tool/hook@2.2.4":
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/@validator.tool/hook/-/hook-2.2.4.tgz#e46262e3f2e7159ab069769a3b425a23e2dcb228"
+  integrity sha512-hW8nWhL33+wSZXYeqm2RI7E6kpaQxg883kcJdQo3XHgO6++xeVlUmoDLov7Dz6Sb0+S4iziR8JatE6EiVV6N+g==
+  dependencies:
+    validator.tool "2.2.4"
+
 "@vue/babel-helper-vue-transform-on@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
@@ -19010,6 +19017,11 @@ validate-npm-package-name@^4.0.0:
   dependencies:
     builtins "^5.0.0"
 
+validator.tool@2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/validator.tool/-/validator.tool-2.2.4.tgz#74877796be3eae23a038be06a74d00c0bbb47b82"
+  integrity sha512-JkjrGA16YeSbISFFijNJGiYjly0bybY7qBNNZGq0nHV7oL2wfKXD1EO8iyRpZlfS4cJjpdaXQ2BDrtcmas79jQ==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"