feat(Form): rule message can be function (#5704)

src/field/index.js

@@ -3,7 +3,14 @@ import { formatNumber } from './utils';
 import { isIOS } from '../utils/validate/system';
 import { preventDefault } from '../utils/dom/event';
 import { resetScroll } from '../utils/dom/reset-scroll';
-import { createNamespace, isObject, isDef, addUnit, isPromise } from '../utils';
+import {
+  createNamespace,
+  isObject,
+  isDef,
+  addUnit,
+  isPromise,
+  isFunction,
+} from '../utils';
 
 // Components
 import Icon from '../icon';
@@ -137,7 +144,7 @@ export default createComponent({
       }
     },
 
-    runValidator(rule, value) {
+    runValidator(value, rule) {
       return new Promise(resolve => {
         const returnVal = rule.validator(value, rule);
 
@@ -157,7 +164,7 @@ export default createComponent({
       return !value;
     },
 
-    runSyncRule(rule, value) {
+    runSyncRule(value, rule) {
       if (rule.required && this.isEmptyValue(value)) {
         return false;
       }
@@ -167,6 +174,16 @@ export default createComponent({
       return true;
     },
 
+    getRuleMessage(value, rule) {
+      const { message } = rule;
+
+      if (isFunction(message)) {
+        return message(value, rule);
+      }
+
+      return message;
+    },
+
     runRules(rules) {
       return rules.reduce(
         (promise, rule) =>
@@ -181,15 +198,15 @@ export default createComponent({
               value = rule.formatter(value, rule);
             }
 
-            if (!this.runSyncRule(rule, value)) {
-              this.validateMessage = rule.message;
+            if (!this.runSyncRule(value, rule)) {
+              this.validateMessage = this.getRuleMessage(value, rule);
               return;
             }
 
             if (rule.validator) {
-              return this.runValidator(rule, value).then(result => {
+              return this.runValidator(value, rule).then(result => {
                 if (result === false) {
-                  this.validateMessage = rule.message;
+                  this.validateMessage = this.getRuleMessage(value, rule);
                 }
               });
             }

src/form/README.md

@@ -437,8 +437,8 @@ export default {
 
 | Key | Description | Type |
 |------|------|------|
-| message | Error message | *string* |
 | required | Whether to be a required field | *boolean* |
+| message `v2.5.3` | Error message | *string \| (value, rule) => string* |
 | validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* |
 | pattern `v2.5.3` | Regex pattern | *RegExp* |
 | trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* |

src/form/README.zh-CN.md

@@ -476,8 +476,8 @@ export default {
 
 | 键名 | 说明 | 类型 |
 |------|------|------|
-| message | 错误提示文案 | *string* |
 | required | 是否为必选字段 | *boolean* |
+| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* |
 | validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* |
 | pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* |
 | trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* |

src/form/test/props.spec.js

@@ -59,6 +59,33 @@ test('rules prop - pattern', async () => {
   });
 });
 
+test('rules prop - message function', async () => {
+  const onFailed = jest.fn();
+  const wrapper = mountForm({
+    template: `
+      <van-form @failed="onFailed">
+        <van-field name="A" :rules="rules" value="123" />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data() {
+      return {
+        rules: [{ pattern: /\d{6}/, message: val => val }],
+      };
+    },
+    methods: {
+      onFailed,
+    },
+  });
+
+  await submitForm(wrapper);
+
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: '123', name: 'A' }],
+    values: { A: '123' },
+  });
+});
+
 test('rules prop - formatter', async () => {
   const onFailed = jest.fn();
   const wrapper = mountForm({