From 1ad93b699ff890327de9a65f26611e9415140600 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 18 Jan 2022 01:31:56 +0800
Subject: [PATCH] 表单校验
---
src/components/mini/box10-add.vue | 124 ++++++++++++++++++++++++++++++-----------
1 files changed, 91 insertions(+), 33 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 8a33c45..1d314e1 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -1,32 +1,32 @@
<template>
- <div class="myFrom">
- <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-model-item label="标题">
+ <div>
+ <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
+ <a-form-model-item label="标题" prop="title">
<a-input v-model="form.title" placeholder="限 50字内" />
</a-form-model-item>
<a-form-model-item label="模式切换">
<a-switch v-model="form.online" />
<span class="myTip">
- 本地编辑/由系统生成文件
+ 本地文件/由系统生成文件
</span>
</a-form-model-item>
- <a-form-model-item label="日志文件" v-show="!form.online">
+ <a-form-model-item label="日志文件" v-show="!form.online" prop="blogFileList">
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:default-file-list="form.blogFileList">
<a-button>
- <a-icon type="upload" /> 限 md/html 文件
+ <a-icon type="upload" /> 限 markdown/html
</a-button>
</a-upload>
</a-form-model-item>
- <a-form-model-item label="日志内容" v-show="form.online">
+ <a-form-model-item label="日志内容" v-show="form.online" prop="content">
<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
</a-form-model-item>
- <a-form-model-item label="分类">
+ <a-form-model-item label="分类" prop="class">
<a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
:getPopupContainer="getCalendarContainer()">
<a-select-option value="shanghai">
@@ -41,25 +41,25 @@
</a-select>
</a-form-model-item>
- <a-form-model-item label="偏好">
+ <a-form-model-item label="额外设置">
<a-switch v-model="form.preference" />
</a-form-model-item>
<div v-show="form.preference" class="myBorder" style="padding:10px;">
- <a-form-model-item label="草稿模式">
+ <a-form-model-item label="起个草稿">
<a-switch v-model="form.tempSave" />
<span v-show="form.tempSave" class="myTip">
- 临时存储,将不会发布该篇日志
+ 临时存储,游客无法浏览
</span>
</a-form-model-item>
<a-form-model-item label=" 文件类型">
<a-radio-group v-model="form.blogType">
<a-radio value="Markdown">
- Markdown
+ markdown
</a-radio>
<a-radio value="Html">
- Html
+ html
</a-radio>
</a-radio-group>
</a-form-model-item>
@@ -72,16 +72,19 @@
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
- <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
+ <a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
{{ tag }}
</a-tag>
</template>
+
<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
@keyup.enter="handleInputConfirm" />
+
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
<a-icon type="plus" /> New Tag
</a-tag>
+
</a-form-model-item>
@@ -95,14 +98,14 @@
</a-form-model-item>
<a-form-model-item label="定时">
- <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
+ <a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
style="width: 100%;" :disabledDate="disabledDate"
:getCalendarContainer="getCalendarContainer()" />
</a-form-model-item>
- <div v-bind:class="{'myBorder':form.lock}">
+ <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
<a-form-model-item label="加锁">
<a-switch v-model="form.lock" />
@@ -143,6 +146,7 @@
export default {
data() {
return {
+
blogFileList: [],
coverFileList: [
// {
@@ -157,13 +161,13 @@
inputVisible: false,
inputValue: '',
labelCol: {
- span: 5
+ span: 7
},
wrapperCol: {
- span: 19
+ span: 13
},
form: {
- preference: true,
+ preference: false,
title: '',
content: '',
class: [],
@@ -174,16 +178,65 @@
auth: "private",
password: "",
blogFileList: [],
- coverFileList: [
- // {
- // uid: '-1',
- // name: 'xxx.png',
- // status: 'done',
- // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // }
- ],
+ coverFileList: [],
},
+ rules: {
+ title: [{
+ required: true,
+ message: '标题不能为空',
+ trigger: 'blur'
+ },
+ {
+ min: 5,
+ max: 50,
+ message: '字数限制1~50',
+ trigger: 'blur'
+ },
+ ],
+ content: [{
+ required: true,
+ message: '至少选一个上传内容',
+ trigger: 'blur'
+ }, ],
+ blogFileList: [{
+ required: true,
+ message: '文件未上传',
+ }, {
+ min: 1,
+ message: '文件未上传',
+ }, ],
+ class: [{
+ required: true,
+ message: '至少选一个分类',
+ trigger: 'blur'
+ }, ],
+ // region: [{
+ // required: true,
+ // message: 'Please select Activity zone',
+ // trigger: 'change'
+ // }],
+ // date1: [{
+ // required: true,
+ // message: 'Please pick a date',
+ // trigger: 'change'
+ // }],
+ // type: [{
+ // type: 'array',
+ // required: true,
+ // message: 'Please select at least one activity type',
+ // trigger: 'change',
+ // }, ],
+ // resource: [{
+ // required: true,
+ // message: 'Please select activity resource',
+ // trigger: 'change'
+ // }, ],
+ // desc: [{
+ // required: true,
+ // message: 'Please input activity form',
+ // trigger: 'blur'
+ // }],
+ }
};
},
methods: {
@@ -195,7 +248,7 @@
},
handleClose(removedTag) {
const tags = this.tags.filter(tag => tag !== removedTag);
- console.log(tags);
+ //console.log(tags);
this.tags = tags;
},
@@ -216,21 +269,25 @@
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
- console.log(tags);
+ //console.log(tags);
Object.assign(this, {
tags,
inputVisible: false,
inputValue: '',
});
},
- onSubmit() {
- console.log('submit!', this.form);
- },
+
},
};
</script>
<style lang="less">
+ @media screen and(max-width: 575px) {
+ .ant-form-item-label {
+ padding: 8px !important;
+ }
+ }
+
.myTip {
font-size: 10px;
color: #999;
@@ -238,6 +295,7 @@
.myBorder {
border: 1px solid #999;
+ border-radius: 10px;
}
.ant-upload-list-item-info {
--
Gitblit v1.9.1