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 - + +
Submit
@@ -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 - + +
提交
@@ -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'));