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 +++++++++++++++-----
src/components/mini/Aplayer.vue | 4
src/components/swichLabel/main1-show.vue | 55 ++++++--
src/components/mini/tagInfo.vue | 6
src/components/group/tempFormCheck.vue | 141 +++++++++++++++++++++++
5 files changed, 276 insertions(+), 54 deletions(-)
diff --git a/src/components/group/tempFormCheck.vue b/src/components/group/tempFormCheck.vue
new file mode 100644
index 0000000..5876d7f
--- /dev/null
+++ b/src/components/group/tempFormCheck.vue
@@ -0,0 +1,141 @@
+<template>
+ <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+ <a-form-model-item ref="name" label="Activity name" prop="name">
+ <a-input v-model="form.name" @blur="
+ () => {
+ $refs.name.onFieldBlur();
+ }
+ " />
+ </a-form-model-item>
+ <a-form-model-item label="Activity zone" prop="region">
+ <a-select v-model="form.region" placeholder="please select your zone">
+ <a-select-option value="shanghai">
+ Zone one
+ </a-select-option>
+ <a-select-option value="beijing">
+ Zone two
+ </a-select-option>
+ </a-select>
+ </a-form-model-item>
+ <a-form-model-item label="Activity time" required prop="date1">
+ <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
+ </a-form-model-item>
+ <a-form-model-item label="Instant delivery" prop="delivery">
+ <a-switch v-model="form.delivery" />
+ </a-form-model-item>
+ <a-form-model-item label="Activity type" prop="type">
+ <a-checkbox-group v-model="form.type">
+ <a-checkbox value="1" name="type">
+ Online
+ </a-checkbox>
+ <a-checkbox value="2" name="type">
+ Promotion
+ </a-checkbox>
+ <a-checkbox value="3" name="type">
+ Offline
+ </a-checkbox>
+ </a-checkbox-group>
+ </a-form-model-item>
+ <a-form-model-item label="Resources" prop="resource">
+ <a-radio-group v-model="form.resource">
+ <a-radio value="1">
+ Sponsor
+ </a-radio>
+ <a-radio value="2">
+ Venue
+ </a-radio>
+ </a-radio-group>
+ </a-form-model-item>
+ <a-form-model-item label="Activity form" prop="desc">
+ <a-input v-model="form.desc" type="textarea" />
+ </a-form-model-item>
+ <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+ <a-button type="primary" @click="onSubmit">
+ Create
+ </a-button>
+ <a-button style="margin-left: 10px;" @click="resetForm">
+ Reset
+ </a-button>
+ </a-form-model-item>
+ </a-form-model>
+</template>
+<script>
+ export default {
+ data() {
+ return {
+ labelCol: {
+ span: 4
+ },
+ wrapperCol: {
+ span: 14
+ },
+ other: '',
+ form: {
+ name: '',
+ region: undefined,
+ date1: undefined,
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ },
+ rules: {
+ name: [{
+ required: true,
+ message: 'Please input Activity name',
+ trigger: 'blur'
+ },
+ {
+ min: 3,
+ max: 5,
+ message: 'Length should be 3 to 5',
+ 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: {
+ onSubmit() {
+ this.$refs.ruleForm.validate(valid => {
+ if (valid) {
+ console.log('11');
+ alert('submit!');
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ resetForm() {
+ this.$refs.ruleForm.resetFields();
+ },
+ },
+ };
+</script>
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
index cb854f2..10f36e1 100644
--- a/src/components/mini/Aplayer.vue
+++ b/src/components/mini/Aplayer.vue
@@ -14,8 +14,8 @@
audio: {
name: 'Moonwisher',
artist: 'Kan R. Gao',
- url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
- // url: '/moon.mp3',
+ // url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
+ url: '/moon.mp3',
cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130',
},
};
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 {
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index abb1e7a..d738615 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -8,18 +8,18 @@
<p slot="pendingDot" style="font-size: 18px;" />
<a-timeline-item color="white">
<a-icon slot="dot" type="form" style="font-size: 18px;" />
- <h4>我...</h4>
+ <br>
<p>
<ul>
<li> 尘世间一个迷途小码农</li>
<li> 喜欢钢琴~喜欢吉他 </li>
<li> 爱音乐,也爱看番 </li>
<li> B界的白嫖怪</li>
- <li> PC单机的<em style="font-size: 10px;">伪</em>硬核玩家 </li>
+ <li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
<li>
<img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
- 我的小老弟&御用暖床怪
+ 我的小老弟&御用暖床袋
<img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
<span style="font-size: 10px;color: #999">(小乖)</span>
</li>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 15a592b..1da01f3 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -12,19 +12,23 @@
:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
<boxRight></boxRight>
</a-drawer>
-
- <a-modal v-model="visible" title="日志添加" on-ok="handleOk" >
- <template slot="footer">
- <a-button key="back" @click="handleCancel">
- 暂缓
- </a-button>
- <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
- 完事..
- </a-button>
- </template>
- <box10 ref="modal" ></box10>
- </a-modal>
-
+ <a-row>
+ <a-col v-bind="colApiLeft">
+ <div class="myModal">
+ <a-modal v-model="visible" title="日志添加" on-ok="handleOk">
+ <template slot="footer">
+ <a-button key="back" @click="handleCancel">
+ 歇会
+ </a-button>
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+ 完事<span style="font-size: 10px;">儿</span>..
+ </a-button>
+ </template>
+ <box10 ref="modalBox"></box10>
+ </a-modal>
+ </div>
+ </a-col>
+ </a-row>
</div>
<div class="blog-main">
<a-row>
@@ -41,8 +45,9 @@
</a-button>
<a-button @click="showModal">
日志
- <a-icon type="plus-circle" style="margin-left: 0px;"/>
+ <a-icon type="plus-circle" style="margin-left: 0px;" />
</a-button>
+ <!-- <tempFormCheck></tempFormCheck> -->
<router-view class="fade"></router-view>
</a-col>
@@ -56,6 +61,7 @@
</template>
<script>
+ import tempFormCheck from "../group/tempFormCheck.vue"
import box10 from "../mini/box10-add.vue"
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
@@ -65,6 +71,7 @@
export default {
components: {
+ tempFormCheck,
box10,
boxLeft,
boxRight,
@@ -74,12 +81,28 @@
},
methods: {
+ getCalendarContainer(trigger) {
+ return this.$refs.myModal;
+ },
showModal() {
this.visible = true;
},
handleOk(e) {
- console.log(this.$refs.modal.form);
-
+ console.log(this.$refs.modalBox.form);
+ var res=this.$refs.modalBox.$refs.myForm.validate(valid => {
+ if (valid) {
+ this.$message.info("校验通过")
+ } else {
+ this.$message.info("校验失败")
+ return false;
+ }
+ });
+
+
+ if(!res)return;
+
+ this.$message.info("提交表单")
+
this.loading = true;
setTimeout(() => {
this.visible = false;
--
Gitblit v1.9.1