feat(Form): allow validator to return mesage (#8052)

src/form/demo/ValidateRules.vue

@@ -1,6 +1,6 @@
 <template>
   <demo-block :title="t('title')">
-    <van-form validate-first @sumbit="onSubmit" @failed="onFailed">
+    <van-form @sumbit="onSubmit" @failed="onFailed">
       <van-field
         v-model="value1"
         name="pattern"
@@ -17,6 +17,13 @@
       />
       <van-field
         v-model="value3"
+        name="validatorMessage"
+        :label="t('label')"
+        :rules="[{ validator: validatorMessage }]"
+        :placeholder="t('validatorMessage')"
+      />
+      <van-field
+        v-model="value4"
         name="asyncValidator"
         :label="t('label')"
         :rules="[{ validator: asyncValidator, message: t('message') }]"
@@ -42,20 +49,24 @@ const i18n = {
     title: '校验规则',
     submit: '提交',
     message: '请输入正确内容',
+    invalid: (val) => `${val} 不合法，请重新输入`,
     pattern: '正则校验',
     validator: '函数校验',
     validating: '验证中...',
     asyncValidator: '异步函数校验',
+    validatorMessage: '校验函数返回错误提示',
   },
   'en-US': {
     label: 'Label',
     title: 'Validate Rules',
     submit: 'Submit',
     message: 'Error message',
+    invalid: (val) => `${val} is invalid`,
     pattern: 'Use pattern',
     validator: 'Use validator',
     validating: 'Validating...',
     asyncValidator: 'Use async validator',
+    validatorMessage: 'Use validator to return message',
   },
 };
 
@@ -65,11 +76,14 @@ export default {
     const state = reactive({
       value1: '',
       value2: '',
-      value3: '',
+      value3: 'abc',
+      value4: '',
     });
 
     const validator = (val) => /1\d{10}/.test(val);
 
+    const validatorMessage = (val) => t('invalid', val);
+
     const asyncValidator = (val) =>
       new Promise((resolve) => {
         Toast.loading(t('validating'));
@@ -96,6 +110,7 @@ export default {
       onFailed,
       validator,
       asyncValidator,
+      validatorMessage,
     };
   },
 };