docs(Form): add async validation document

src/form/README.md

@@ -49,20 +49,15 @@ export default {
       console.log('submit', values);
     },
   },
-}
+};
 ```
 
 ### Validate Rules
 
 ```html
 <van-form @submit="onSubmit" @failed="onFailed">
-  <van-field
+  <van-field v-model="value" name="phone" label="Phone" :rules="rules.phone" />
-    v-model="value"
+  <van-field v-model="code" name="code" label="Code" :rules="rules.code" />
-    name="phone"
-    label="Phone"
-    :rules="rules"
-    placeholder="Phone"
-  />
   <div style="margin: 16px;">
     <van-button round block type="info">Submit</van-button>
   </div>
@@ -70,15 +65,36 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
-    this.rules = [
+    this.rules = {
-      { required: true, message: 'Phone is required' },
+      phone: [
-      { validator: val => /1\d{10}/.test(val), message: 'Incorrect format' },
+        { required: true, message: 'Phone is required' },
-    ];
+        { validator: val => this.validatePhone, message: 'Incorrect phone' },
+      ],
+      code: [
+        { required: true, message: 'Code is required' },
+        { validator: this.validateCode, message: 'Incorrect code' },
+      ],
+    };
     return { value: '' };
   },
   methods: {
+    validatePhone(val) {
+      return /1\d{10}/.test(val);
+    },
+    validateCode(val) {
+      return new Promise(resolve => {
+        Toast.loading('Validating...');
+
+        setTimeout(() => {
+          Toast.clear();
+          resolve(/\d{6}/.test(val));
+        }, 1000);
+      });
+    },
     onSubmit(values) {
       console.log('submit', values);
     },
@@ -334,7 +350,7 @@ export default {
     return {
       value: '',
       showArea: false,
-      areaList: {}
+      areaList: {},
     };
   },
   methods: {
@@ -383,7 +399,8 @@ export default {
 ### Props
 
 | Attribute | Description | Type | Default |
-|------|------|------|------|
+| --------- | ----------- | ---- | ------- |
+
 
 ### Events
 
@@ -392,4 +409,5 @@ export default {
 ### Slots
 
 | Name | Description |
-|------|------|
+| ---- | ----------- |
+

src/form/README.zh-CN.md

@@ -60,17 +60,12 @@ export default {
 
 ### 校验规则
 
-在`rules`中，可以通过`validator`字段定义校验函数，校验函数返回`false`时表示校验不通过，返回`Promise`时表示异步校验
+在`rules`中，可以通过`validator`字段定义校验函数
 
 ```html
 <van-form @submit="onSubmit" @failed="onFailed">
-  <van-field
+  <van-field v-model="value" name="phone" label="手机号" :rules="rules.phone" />
-    v-model="value"
+  <van-field v-model="code" name="code" label="验证码" :rules="rules.code" />
-    name="phone"
-    label="手机号"
-    :rules="rules"
-    placeholder="手机号"
-  />
   <div style="margin: 16px;">
     <van-button round block type="info">提交</van-button>
   </div>
@@ -78,15 +73,38 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
-    this.rules = [
+    this.rules = {
-      { required: true, message: '请输入手机号' },
+      phone: [
-      { validator: val => /1\d{10}/.test(val), message: '手机号格式错误' },
+        { required: true, message: '请输入手机号' },
-    ];
+        { validator: val => this.validatePhone, message: '手机号格式错误' },
+      ],
+      code: [
+        { required: true, message: '请输入验证码' },
+        { validator: this.validateCode, message: '验证码错误' },
+      ],
+    };
     return { value: '' };
   },
   methods: {
+    // 校验函数返回 true 表示校验通过，false 表示不通过
+    validatePhone(val) {
+      return /1\d{10}/.test(val);
+    },
+    // 校验函数返回 Promise 来实现异步校验
+    validateCode(val) {
+      return new Promise(resolve => {
+        Toast.loading('验证中...');
+
+        setTimeout(() => {
+          Toast.clear();
+          resolve(/\d{6}/.test(val));
+        }, 1000);
+      });
+    },
     onSubmit(values) {
       console.log('submit', values);
     },

src/form/demo/ValidateRules.vue

@@ -61,7 +61,7 @@ export default {
       phone: [
         { required: true, message: this.$t('requirePhone') },
         {
-          validator: val => /1\d{10}/.test(val),
+          validator: this.validatePhone,
           message: this.$t('incorrectPhone'),
         },
       ],
@@ -76,6 +76,10 @@ export default {
   },
 
   methods: {
+    validatePhone(val) {
+      return /1\d{10}/.test(val);
+    },
+
     validateCode(val) {
       return new Promise(resolve => {
         this.$toast.loading(this.$t('validating'));