feat(form): add props rules属性, 可以统一配置每个FormItem的rules (#1704)

* feat: 给Form添加rules属性, 可以统一配置每个FormItem的rules

* fix: fix docs

* feat: demo

src/packages/__VUE/form/common.ts

@@ -1,13 +1,17 @@
 import { getPropByPath, isObject, isPromise } from '@/packages/utils/util';
 import { computed, provide, reactive, VNode, watch } from 'vue';
 import { FormItemRule } from '../formitem/types';
-import { ErrorMessage, FormRule } from './types';
+import { ErrorMessage, FormRule, FormRules } from './types';
 
 export const component = {
   props: {
     modelValue: {
       type: Object,
       default: {}
+    },
+    rules: {
+      type: Object,
+      default: {}
     }
   },
   components: {},
@@ -82,7 +86,8 @@ export const component = {
 
       // clear tips
       tipMessage({ prop, message: '' });
-      const _rules = [...rules];
+      const formRules: FormRules = props.rules || {};
+      const _rules = [...(formRules?.[prop] || []), ...rules];
       while (_rules.length) {
         const rule = _rules.shift() as FormItemRule;
         const { validator, ...ruleWithoutValidator } = rule;

src/packages/__VUE/form/demo.vue

@@ -57,7 +57,18 @@
       </nut-cell>
     </nut-form>
     <h2>{{ translate('title2') }}</h2>
-    <nut-form :model-value="formData" ref="ruleForm">
+    <nut-form
+      :model-value="formData"
+      :rules="{
+        name: [
+          {
+            message: '名称两个字以上',
+            validator: nameLengthValidator
+          }
+        ]
+      }"
+      ref="ruleForm"
+    >
       <nut-form-item
         :label="translate('name')"
         prop="name"
@@ -396,6 +407,7 @@ export default createDemo({
     const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
       return (rule?.reg as RegExp).test(val);
     };
+    const nameLengthValidator = (val: string) => val?.length >= 2;
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
@@ -412,6 +424,7 @@ export default createDemo({
       validate,
       customValidator,
       customRulePropValidator,
+      nameLengthValidator,
       asyncValidator,
       customBlurValidate,
       submit,

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

@@ -130,7 +130,10 @@ export default {
 
 ```html
 <template>
-<nut-form :model-value="formData" ref="ruleForm">
+<nut-form :model-value="formData" :rules="{name: [{
+            message: 'Name should be at least two characters',
+            validator: nameLengthValidator
+          }]}" ref="ruleForm">
   <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
     <input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
       placeholder="Please enter , blur event validate" type="text" />
@@ -200,6 +203,7 @@ setup(){
     const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
       return (rule?.reg as RegExp).test(val);
     };
+    const nameLengthValidator = (val: string) => val?.length >= 2;
     // Promise async validator
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
@@ -210,7 +214,7 @@ setup(){
         }, 1000);
       });
     };
-    return { ruleForm, formData, validate, customValidator, customRulePropValidator, asyncValidator, customBlurValidate, submit, reset };
+    return { ruleForm, formData, validate, customValidator, customRulePropValidator, nameLengthValidator, asyncValidator, customBlurValidate, submit, reset };
 }
 }
 </script>

src/packages/__VUE/form/doc.md

@@ -130,7 +130,10 @@ export default {
 
 ```html
 <template>
-<nut-form :model-value="formData" ref="ruleForm">
+<nut-form :model-value="formData" :rules="{name: [{
+            message: 'name 至少两个字符',
+            validator: nameLengthValidator
+          }]}" ref="ruleForm">
   <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
     <input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
       placeholder="请输入姓名，blur 事件校验" type="text" />
@@ -200,6 +203,7 @@ setup(){
     const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
       return (rule?.reg as RegExp).test(val);
     };
+    const nameLengthValidator = (val: string) => val?.length >= 2;
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
@@ -210,7 +214,7 @@ setup(){
         }, 1000);
       });
     };
-    return { ruleForm, formData, validate, customValidator, customRulePropValidator, asyncValidator, customBlurValidate, submit, reset };
+    return { ruleForm, formData, validate, customValidator, customRulePropValidator, nameLengthValidator, asyncValidator, customBlurValidate, submit, reset };
 }
 }
 </script>

src/packages/__VUE/form/types.ts

@@ -1,9 +1,14 @@
 import { FormItemRule } from '../formitem/types';
 
+export type FormRules = {
+  [key: string]: FormItemRule[];
+};
+
 export type FormRule = {
   prop: string;
   rules: FormItemRule[];
 };
+
 export type ErrorMessage = {
   prop: string;
   message: string;

src/sites/mobile-taro/vue/src/dentry/pages/form/index.vue

@@ -43,7 +43,18 @@
       </nut-cell>
     </nut-form>
     <h2>表单校验</h2>
-    <nut-form :model-value="formData" ref="ruleForm">
+    <nut-form
+      :model-value="formData"
+      :rules="{
+        name: [
+          {
+            message: 'Name should be at least two characters',
+            validator: nameLengthValidator
+          }
+        ]
+      }"
+      ref="ruleForm"
+    >
       <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
         <input
           class="nut-input-text"
@@ -294,6 +305,7 @@ export default {
     const customRulePropValidator = (val: string, rule: FormItemRuleWithoutValidator) => {
       return (rule?.reg as RegExp).test(val);
     };
+    const nameLengthValidator = (val: string) => val?.length >= 2;
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
@@ -310,6 +322,7 @@ export default {
       validate,
       customValidator,
       customRulePropValidator,
+      nameLengthValidator,
       asyncValidator,
       customBlurValidate,
       submit,