feat(Form): support rule formatter

src/field/index.js

@@ -120,16 +120,6 @@ export default createComponent({
     formValue() {
       return this.children ? this.children.value : this.value;
     },
-
-    formValueEmpty() {
-      const { formValue } = this;
-
-      if (Array.isArray(formValue)) {
-        return !formValue.length;
-      }
-
-      return !formValue;
-    },
   },
 
   methods: {
@@ -147,9 +137,9 @@ export default createComponent({
       }
     },
 
-    runValidator(rule) {
+    runValidator(rule, value) {
       return new Promise(resolve => {
-        const returnVal = rule.validator(this.formValue, rule);
+        const returnVal = rule.validator(value, rule);
 
         if (isPromise(returnVal)) {
           return returnVal.then(resolve);
@@ -159,11 +149,19 @@ export default createComponent({
       });
     },
 
-    runRuleSync(rule) {
-      if (rule.required && this.formValueEmpty) {
+    isEmptyValue(value) {
+      if (Array.isArray(value)) {
+        return !value.length;
+      }
+
+      return !value;
+    },
+
+    runSyncRule(rule, value) {
+      if (rule.required && this.isEmptyValue(value)) {
         return false;
       }
-      if (rule.pattern && !rule.pattern.test(this.formValue)) {
+      if (rule.pattern && !rule.pattern.test(value)) {
         return false;
       }
       return true;
@@ -177,13 +175,19 @@ export default createComponent({
               return;
             }
 
-            if (!this.runRuleSync(rule)) {
+            let value = this.formValue;
+
+            if (rule.formatter) {
+              value = rule.formatter(value);
+            }
+
+            if (!this.runSyncRule(rule, value)) {
               this.validateMessage = rule.message;
               return;
             }
 
             if (rule.validator) {
-              return this.runValidator(rule).then(result => {
+              return this.runValidator(rule, value).then(result => {
                 if (result === false) {
                   this.validateMessage = rule.message;
                 }

src/form/README.md

@@ -442,6 +442,7 @@ export default {
 | 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* |
+| formatter `v2.5.3` | Format value before validate | *(value) => any* |
 
 ### Events
 

src/form/README.zh-CN.md

@@ -481,6 +481,7 @@ export default {
 | validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* |
 | pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* |
 | trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* |
+| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value) => any* |
 
 ### Events
 

src/form/test/props.spec.js

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