From 529e117096945c3331daadd19db36c78fa65a02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 21 Feb 2020 17:11:22 +0800 Subject: [PATCH] feat(Form): support pattern rule (#5700) --- src/field/index.js | 12 ++- src/form/README.md | 44 +++++----- src/form/README.zh-CN.md | 57 +++++++------ src/form/demo/ValidateRules.vue | 81 ++++++++----------- src/form/test/__snapshots__/demo.spec.js.snap | 14 +++- src/form/test/props.spec.js | 27 +++++++ 6 files changed, 143 insertions(+), 92 deletions(-) diff --git a/src/field/index.js b/src/field/index.js index 25806d111..7cac175ee 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -159,6 +159,16 @@ export default createComponent({ }); }, + runRuleSync(rule) { + if (rule.required && this.formValueEmpty) { + return false; + } + if (rule.pattern && !rule.pattern.test(this.formValue)) { + return false; + } + return true; + }, + runRules(rules) { return rules.reduce( (promise, rule) => @@ -167,7 +177,7 @@ export default createComponent({ return; } - if (rule.required && this.formValueEmpty) { + if (!this.runRuleSync(rule)) { this.validateMessage = rule.message; return; } diff --git a/src/form/README.md b/src/form/README.md index 8b0879cee..a75d03483 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -57,9 +57,25 @@ export default { ### Validate Rules ```html - - - + + + +
Submit @@ -73,24 +89,18 @@ import { Toast } from 'vant'; export default { data() { - this.phoneRules = [ - { required: true, message: 'Phone is required' }, - { validator: this.phoneValidator, message: 'Incorrect phone' }, - ]; - this.codeRules = [ - { required: true, message: 'Code is required' }, - { validator: this.codeValidator, message: 'Incorrect code' }, - ]; return { - code: '', - phone: '', + value1: '', + value2: '', + value3: '', + pattern: /\d{6}/, }; }, methods: { - phoneValidator(val) { + validator(val) { return /1\d{10}/.test(val); }, - codeValidator(val) { + asyncValidator(val) { return new Promise(resolve => { Toast.loading('Validating...'); @@ -100,9 +110,6 @@ export default { }, 1000); }); }, - onSubmit(values) { - console.log('submit', values); - }, onFailed(errorInfo) { console.log('failed', errorInfo); }, @@ -433,6 +440,7 @@ export default { | message | Error message | *string* | | required | Whether to be a required field | *boolean* | | validator | Custom validator | *() => 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* | ### Events diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 09a92089c..751eeb554 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -17,7 +17,7 @@ Vue.use(Form); ### 基础用法 -在表单中，每个 [Field 组件](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性可以定义校验规则 +在表单中，每个 [Field 组件](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性定义校验规则 ```html @@ -62,12 +62,31 @@ export default { ### 校验规则 -通过`rules`中的`validator`字段定义校验函数 +通过`rules`定义表单校验规则，可用字段见[下方表格](#/zh-CN/form#rule-shu-ju-jie-gou) ```html - - - + + + + + + +
提交 @@ -81,26 +100,20 @@ import { Toast } from 'vant'; export default { data() { - this.phoneRules = [ - { required: true, message: '请输入手机号' }, - { validator: this.phoneValidator, message: '手机号格式错误' }, - ]; - this.codeRules = [ - { required: true, message: '请输入验证码' }, - { validator: this.codeValidator, message: '验证码错误' }, - ]; return { - code: '', - phone: '', + value1: '', + value2: '', + value3: '', + pattern: /\d{6}/, }; }, methods: { // 校验函数返回 true 表示校验通过，false 表示不通过 - phoneValidator(val) { + validator(val) { return /1\d{10}/.test(val); }, - // 校验函数返回 Promise 来实现异步校验 - codeValidator(val) { + // 异步校验函数返回 Promise + asyncValidator(val) { return new Promise(resolve => { Toast.loading('验证中...'); @@ -110,9 +123,6 @@ export default { }, 1000); }); }, - onSubmit(values) { - console.log('submit', values); - }, onFailed(errorInfo) { console.log('failed', errorInfo); }, @@ -468,8 +478,9 @@ export default { |------|------|------| | message | 错误提示文案 | *string* | | required | 是否为必选字段 | *boolean* | -| validator | 自定义校验函数 | *() => boolean \| Promise* | -| trigger `v2.5.2` | 本项规则的校验触发时机，可选值为`onChange`、`onBlur` | *string* | +| validator | 通过函数进行校验 | *() => boolean \| Promise* | +| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* | +| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* | ### Events diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue index 2ceecfd64..275a2158c 100644 --- a/src/form/demo/ValidateRules.vue +++ b/src/form/demo/ValidateRules.vue @@ -2,18 +2,25 @@ +
@@ -28,66 +35,48 @@ export default { i18n: { 'zh-CN': { - code: '验证码', - phone: '手机号', + label: '文本', title: '校验规则', submit: '提交', + message: '请输入正确内容', + pattern: '正则校验', + validator: '函数校验', validating: '验证中...', - requireCode: '请输入验证码', - requirePhone: '请输入手机号', - incorrectCode: '验证码错误', - incorrectPhone: '手机号格式错误', + asyncValidator: '异步函数校验', }, 'en-US': { - code: 'Code', - phone: 'Phone', + label: 'Label', title: 'Validate Rules', submit: 'Submit', + message: 'Error message', + pattern: 'Use pattern', + validator: 'Use validator', validating: 'Validating...', - requireCode: 'Code is required', - requirePhone: 'Phone is required', - incorrectCode: 'Incorrect code', - incorrectPhone: 'Incorrect phone', + asyncValidator: 'Use async validator', }, }, data() { return { - code: '', - phone: '', + value1: '', + value2: '', + value3: '', + pattern: /\d{6}/, }; }, - created() { - this.phoneRules = [ - { required: true, message: this.$t('requirePhone') }, - { - validator: this.phoneValidator, - message: this.$t('incorrectPhone'), - }, - ]; - - this.codeRules = [ - { required: true, message: this.$t('requireCode') }, - { - validator: this.codeValidator, - message: this.$t('incorrectCode'), - }, - ]; - }, - methods: { - phoneValidator(val) { - return /1\d{10}/.test(val); + validator(val) { + return val === '1234'; }, - codeValidator(val) { + asyncValidator(val) { return new Promise(resolve => { this.$toast.loading(this.$t('validating')); setTimeout(() => { this.$toast.clear(); - resolve(/\d{6}/.test(val)); + resolve(val === '1234'); }, 1000); }); }, diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap index 2276e02b5..e7a5c4440 100644 --- a/src/form/test/__snapshots__/demo.spec.js.snap +++ b/src/form/test/__snapshots__/demo.spec.js.snap @@ -24,15 +24,21 @@ exports[`renders demo correctly 1`] = `
-
手机号
+
文本
-
+
-
验证码
+
文本
-
+
+
+
+
+
文本
+
+