From 81b8a7944eaf3d736247b155f7335d5fe1e64fb3 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 27 Nov 2020 16:56:58 +0800
Subject: [PATCH] 实现表单第二部分：验证优化、普通文本框、图片选择框、文本域、下拉选择框
---
forms/form/CFormItem.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 44 insertions(+), 13 deletions(-)
diff --git a/forms/form/CFormItem.vue b/forms/form/CFormItem.vue
index a8e57fc..ffbf570 100644
--- a/forms/form/CFormItem.vue
+++ b/forms/form/CFormItem.vue
@@ -6,17 +6,7 @@
<template>
<view class="c-form-item">
- <view class="c-form-item-label">
- <text
- class="required"
- v-if="required"
- >*</text>
- <text>{{label || name}}</text>
- </view>
- <slot
- :value="formData[name]"
- :onChange="evt=>onChange(evt)"
- />
+ <slot :itemData="itemData" />
</view>
</template>
@@ -34,7 +24,37 @@
formData: Object,
},
data() {
- return {};
+ return {
+ error: false,
+ };
+ },
+ computed: {
+ itemData() {
+ return {
+ formData: this.formData,
+ name: this.name,
+ label: this.label,
+ required: this.isRequired,
+ error: this.error,
+ onChange: (evt) => this.onChange(evt),
+ };
+ },
+ isRequired() {
+ if (this.required) {
+ return true;
+ } else {
+ if (!this.rules || this.rules.length === 0) {
+ return false;
+ } else if (this.rules.length > 0) {
+ for (let rule of this.rules) {
+ if (rule.required) {
+ return true;
+ }
+ }
+ return false;
+ }
+ }
+ },
},
methods: {
onChange(evt) {
@@ -64,12 +84,14 @@
// 未设置验证
if (!this.required && !this.rules) {
this.formData.$regItemValidator(this.name, () => {
+ this.error = false;
return Promise.resolve({
name: this.name,
passed: true,
});
});
} else {
+ // 验证规则
const descriptor = this.rules || [];
if (this.required) {
descriptor.unshift({
@@ -79,7 +101,10 @@
const validator = new Schema({
[this.name]: descriptor,
});
- validator.messages(validateMsgs); // 自定义验证消息
+ // 汉化通用验证消息
+ validator.messages(validateMsgs);
+ // 注册验证
+ let errTimer = null;
this.formData.$regItemValidator(this.name, () => {
return validator
.validate({
@@ -87,12 +112,18 @@
})
.then(
(res) => {
+ this.error = false;
return {
name: this.name,
passed: true,
};
},
({ errors, fields }) => {
+ this.error = true;
+ clearTimeout(errTimer);
+ errTimer = setTimeout(() => {
+ this.error = false;
+ }, 5000);
return {
name: this.name,
passed: false,
--
Gitblit v1.9.1