From 57d59e8a8640fb0fcfdbe2d0c09fac0f1cbe5697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 12 Feb 2020 17:27:29 +0800
Subject: [PATCH] docs(Form): add async validation document
---
src/form/README.md | 48 ++++++++++++++++++++++-----------
src/form/README.zh-CN.md | 42 ++++++++++++++++++++---------
src/form/demo/ValidateRules.vue | 6 ++++-
3 files changed, 68 insertions(+), 28 deletions(-)
diff --git a/src/form/README.md b/src/form/README.md
index c21cf0f99..fdf5683e0 100644
--- a/src/form/README.md
+++ b/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
- v-model="value"
- name="phone"
- label="Phone"
- :rules="rules"
- placeholder="Phone"
- />
+ <van-field v-model="value" name="phone" label="Phone" :rules="rules.phone" />
+ <van-field v-model="code" name="code" label="Code" :rules="rules.code" />
<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 = [
- { required: true, message: 'Phone is required' },
- { validator: val => /1\d{10}/.test(val), message: 'Incorrect format' },
- ];
+ this.rules = {
+ phone: [
+ { 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 |
-|------|------|
+| ---- | ----------- |
+
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index d1dc67c46..c57d50a9b 100644
--- a/src/form/README.zh-CN.md
+++ b/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
- v-model="value"
- name="phone"
- label="手机号"
- :rules="rules"
- placeholder="手机号"
- />
+ <van-field v-model="value" name="phone" label="手机号" :rules="rules.phone" />
+ <van-field v-model="code" name="code" label="验证码" :rules="rules.code" />
<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 = [
- { required: true, message: '请输入手机号' },
- { validator: val => /1\d{10}/.test(val), message: '手机号格式错误' },
- ];
+ this.rules = {
+ phone: [
+ { 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);
},
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index d3834df7d..1aa434e73 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/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'));