From f1ceb2be12f32e6c532876e64e09dbfbcdef5d7b Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 22 Jan 2022 00:11:24 +0800 Subject: [PATCH 1/6] feat(form): improve documents --- examples/form/demos/base.vue | 30 ++++------ examples/form/demos/custom-validator.vue | 48 +++++++-------- examples/form/demos/reset.vue | 66 +++++++++++++++++++++ examples/form/demos/size.vue | 74 ++++++++++++++++++++++++ examples/form/demos/validator-status.vue | 46 +++++++++++---- examples/form/demos/validator.vue | 56 +++++++++--------- src/_common | 2 +- src/form/form-item.tsx | 7 +-- 8 files changed, 243 insertions(+), 86 deletions(-) create mode 100644 examples/form/demos/reset.vue create mode 100644 examples/form/demos/size.vue diff --git a/examples/form/demos/base.vue b/examples/form/demos/base.vue index 9eca5b768..86d48f298 100644 --- a/examples/form/demos/base.vue +++ b/examples/form/demos/base.vue @@ -1,42 +1,32 @@ diff --git a/examples/form/demos/size.vue b/examples/form/demos/size.vue new file mode 100644 index 000000000..b1dabbe3d --- /dev/null +++ b/examples/form/demos/size.vue @@ -0,0 +1,74 @@ + + diff --git a/examples/form/demos/validator-status.vue b/examples/form/demos/validator-status.vue index 4e2d73a78..8613c51b7 100644 --- a/examples/form/demos/validator-status.vue +++ b/examples/form/demos/validator-status.vue @@ -1,34 +1,45 @@ + + + + + + + - - - - + 提交 重置 @@ -83,6 +98,7 @@ export default { }, data() { return { + formStatusIcon: true, formData: { ...INITIAL_DATA }, rules: { fail: [{ required: true, message: '必填', type: 'error' }], @@ -126,3 +142,9 @@ export default { }, }; + + diff --git a/examples/form/demos/validator.vue b/examples/form/demos/validator.vue index 8a5a45613..0d26ea725 100644 --- a/examples/form/demos/validator.vue +++ b/examples/form/demos/validator.vue @@ -1,45 +1,42 @@ + + diff --git a/examples/form/demos/custom-validator.vue b/examples/form/demos/custom-validator.vue index a8866407b..98cf590cc 100644 --- a/examples/form/demos/custom-validator.vue +++ b/examples/form/demos/custom-validator.vue @@ -33,31 +33,19 @@ export default { formData: { ...INITIAL_DATA }, rules: { account: [ - { required: true, message: '姓名必填', type: 'error' }, + { required: true, message: '用户名必填', type: 'error' }, { - validator: (val) => new Promise((resolve) => { - const timer = setTimeout(() => { - if (['Zhang', 'Li', 'Wang'].includes(val)) { - resolve(true); - } else { - resolve(false); - } - clearTimeout(timer); - }, 10); - }), - type: 'error', - message: '用户不存在', + validator: this.userNameValidator, }, ], password: [ { required: true, message: '密码必填', type: 'error' }, - // 不同的校验结果有不同的错误信息提醒，切错误信息类型不同 + // 自定义校验规则：不同的值可以有不同的校验结果，不同的校验类型 { validator: this.passwordValidator }, ], rePassword: [ - // 自定义校验规则 { required: true, message: '密码必填', type: 'error' }, - // 自定义异步校验规则 + // 自定义校验规则：自定义异步校验规则 { validator: this.rePassword, message: '两次密码不一致' }, ], }, @@ -89,6 +77,19 @@ export default { trigger: 'blur', }); }, + // 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型 + userNameValidator(val) { + return new Promise((resolve) => { + const timer = setTimeout(() => { + if (['Zhang', 'Li', 'Wang'].includes(val)) { + resolve({ result: true }); + } else { + resolve({ result: false, message: '用户名不存在', type: 'error' }); + } + clearTimeout(timer); + }, 10); + }); + }, // 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除） passwordValidator(val) { if (val.length > 0 && val.length <= 2) { diff --git a/examples/form/demos/validator-status.vue b/examples/form/demos/validator-status.vue index 8613c51b7..00fa47ab7 100644 --- a/examples/form/demos/validator-status.vue +++ b/examples/form/demos/validator-status.vue @@ -30,10 +30,10 @@ - + - + diff --git a/examples/form/demos/validator.vue b/examples/form/demos/validator.vue index 0d26ea725..744b05e1a 100644 --- a/examples/form/demos/validator.vue +++ b/examples/form/demos/validator.vue @@ -42,7 +42,7 @@ 提交 重置 - 清除校验结果 + 清空校验结果 diff --git a/src/_common b/src/_common index 0522f13ac..02ff8f5c0 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 0522f13acd2dccfabb07f7db28e62052d65bc0c4 +Subproject commit 02ff8f5c0295c0fc54a0820aba6826a2196b3446 From c5b00b8c27a7455e37f6e732be50d14c7ee30db3 Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 22 Jan 2022 15:31:08 +0800 Subject: [PATCH 3/6] feat(form): support complicated data validate --- examples/form/demos/disabled.vue | 66 +++++++ .../form/demos/validate-complicated-data.vue | 167 ++++++++++++++++++ examples/form/demos/validate-message.vue | 66 +++++++ src/_common | 2 +- src/form/form-item.tsx | 8 +- 5 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 examples/form/demos/disabled.vue create mode 100644 examples/form/demos/validate-complicated-data.vue create mode 100644 examples/form/demos/validate-message.vue diff --git a/examples/form/demos/disabled.vue b/examples/form/demos/disabled.vue new file mode 100644 index 000000000..86d48f298 --- /dev/null +++ b/examples/form/demos/disabled.vue @@ -0,0 +1,66 @@ + + diff --git a/examples/form/demos/validate-complicated-data.vue b/examples/form/demos/validate-complicated-data.vue new file mode 100644 index 000000000..4212c72dd --- /dev/null +++ b/examples/form/demos/validate-complicated-data.vue @@ -0,0 +1,167 @@ + + + diff --git a/examples/form/demos/validate-message.vue b/examples/form/demos/validate-message.vue new file mode 100644 index 000000000..86d48f298 --- /dev/null +++ b/examples/form/demos/validate-message.vue @@ -0,0 +1,66 @@ + + diff --git a/src/_common b/src/_common index 02ff8f5c0..1671e9b44 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 02ff8f5c0295c0fc54a0820aba6826a2196b3446 +Subproject commit 1671e9b4498d658c3dd50552196d749f3dfb8e0d diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index b3a27b9f1..d7a6ff40b 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -139,7 +139,13 @@ export default mixins(getConfigReceiverMixins('f }, innerRules(): FormRule[] { const parent = this.form; - return lodashGet(parent?.rules, this.name) || this.rules || []; + if (this.rules?.length) return this.rules || []; + if (!this.name) { + return []; + } + const index = this.name.lastIndexOf('.') || -1; + const ruleName = index !== -1 ? this.name.slice(index + 1) : this.name; + return lodashGet(parent?.rules, ruleName) || []; }, }, From 9cfd4365db2d6802443a70dfa716fea2a0fcee88 Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 22 Jan 2022 18:54:07 +0800 Subject: [PATCH 4/6] test: update snapshots --- test/ssr/__snapshots__/ssr.test.js.snap | 478 ++++++++++++++++++++++-- 1 file changed, 455 insertions(+), 23 deletions(-) diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 5ef08eaf1..2d2167717 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -4066,6 +4066,102 @@ exports[`ssr snapshot test renders ./examples/form/demos/base.vue correctly 1`] `; +exports[`ssr snapshot test renders ./examples/form/demos/clear-validate.vue correctly 1`] = ` +
+
+ +
+
+
+
+
+
+
一句话介绍自己
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
请选择 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue correctly 1`] = `
@@ -4092,7 +4188,62 @@ exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue co
-
在此处体验普通自定义校验方法
+
自定义异步校验方法
+
+ +
+
+
+
+
+
+ + +`; + +exports[`ssr snapshot test renders ./examples/form/demos/disabled.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -4159,6 +4310,268 @@ exports[`ssr snapshot test renders ./examples/form/demos/login.vue correctly 1`]
`; +exports[`ssr snapshot test renders ./examples/form/demos/reset.vue correctly 1`] = ` +
+
+
+
+
+


+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`ssr snapshot test renders ./examples/form/demos/size.vue correctly 1`] = ` +
+
+
+
+
+


+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`ssr snapshot test renders ./examples/form/demos/validate-complicated-data.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+`; + +exports[`ssr snapshot test renders ./examples/form/demos/validate-message.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly 1`] = `
@@ -4168,16 +4581,24 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
这里请填写用户名
+
这是用户名字段帮助说明
-
+
+
+
+
+
+
+
一句话介绍自己
+
+
+
-
这里请填写密码
-
+
@@ -4238,7 +4659,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
@@ -4246,22 +4667,26 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly `; exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue correctly 1`] = ` -
+
+
+
+
+
+


-
+
-
+
-
这是校验通过后的提示信息
-
+
@@ -4269,7 +4694,15 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
+
+
+
+
+
+
+
+
@@ -4277,7 +4710,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4285,7 +4718,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4297,28 +4730,27 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
-
+
+
-
- +
-
-
+
+
-
+
+
-
自定义帮助图标
-
+
From 08d8c0daefbcc90a6ec9f31dd575d06f69870f35 Mon Sep 17 00:00:00 2001 From: chaishi Date: Sat, 22 Jan 2022 23:26:38 +0800 Subject: [PATCH 5/6] fix(form): ruleName --- examples/form/demos/clear-validate.vue | 22 +++++++------- .../form/demos/validate-complicated-data.vue | 6 +++- examples/form/demos/validator.vue | 30 ++++++++++++++----- src/form/form-item.tsx | 8 ++--- test/ssr/__snapshots__/ssr.test.js.snap | 8 ++--- 5 files changed, 45 insertions(+), 29 deletions(-) diff --git a/examples/form/demos/clear-validate.vue b/examples/form/demos/clear-validate.vue index b099ac6f4..f76dd8b4c 100644 --- a/examples/form/demos/clear-validate.vue +++ b/examples/form/demos/clear-validate.vue @@ -81,30 +81,30 @@ export default { ], rules: { account: [ - { required: true, message: '姓名必填', type: 'error' }, - { min: 2, message: '至少需要两个字符，一个中文等于两个字符', type: 'warning' }, - { max: 10, message: '姓名字符长度超出', type: 'warning' }, + { required: true, message: '姓名必填' }, + { min: 2, message: '至少需要两个字符，一个中文等于两个字符' }, + { max: 10, message: '姓名字符长度超出' }, ], description: [ { validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' }, { validator: (val) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' }, ], password: [ - { required: true, message: '密码必填', type: 'error' }, - { len: 8, message: '请输入 8 位密码', type: 'warning' }, - { pattern: /[A-Z]+/, message: '密码必须包含大写字母', type: 'warning' }, + { required: true, message: '密码必填' }, + { len: 8, message: '请输入 8 位密码' }, + { pattern: /[A-Z]+/, message: '密码必须包含大写字母' }, ], email: [ - { required: true, message: '邮箱必填', type: 'warning' }, + { required: true, message: '邮箱必填' }, { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }, ], - gender: [{ required: true, message: '性别必填', type: 'warning' }], + gender: [{ required: true, message: '性别必填' }], course: [ - { required: true, message: '课程必填', type: 'warning' }, - { validator: (val) => val.length <= 2, message: '最多选择 2 门课程', type: 'warning' }, + { required: true, message: '课程必填' }, + { validator: (val) => val.length <= 2, message: '最多选择 2 门课程' }, ], 'content.url': [ - { required: true, message: '个人网站必填', type: 'warning' }, + { required: true, message: '个人网站必填' }, { url: { protocols: ['http', 'https', 'ftp'], diff --git a/examples/form/demos/validate-complicated-data.vue b/examples/form/demos/validate-complicated-data.vue index 4212c72dd..83ecf85d3 100644 --- a/examples/form/demos/validate-complicated-data.vue +++ b/examples/form/demos/validate-complicated-data.vue @@ -27,19 +27,23 @@ :destroyOnHide="false" >
- + + + 文科 理科 + + 提交 重置 diff --git a/examples/form/demos/validator.vue b/examples/form/demos/validator.vue index 744b05e1a..74550cb81 100644 --- a/examples/form/demos/validator.vue +++ b/examples/form/demos/validator.vue @@ -1,6 +1,7 @@