修改广告管理中的数据校验

.eslintrc.js

@@ -222,7 +222,7 @@ module.exports = {
       }
     ],
     'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'always'],
+    'space-before-function-paren': { anonymous: 'always', named: 'never', asyncArrow: 'always' },
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
     'space-unary-ops': [

src/utils/image.js

@@ -94,10 +94,23 @@ export default class ImageCompress {
 const path = import.meta.env.VITE_FILE_API + '/'
 export const getUrl = (url) => url && url.slice(0, 4) !== 'http' ? path + url : url
 
-export const isVideoExt = (url) => url.endsWith('.mp4') || url.endsWith('.mov') || url.endsWith('.webm') || url.endsWith('.ogg');
+export const isVideoExt = (url) => url.endsWith('.mp4') || url.endsWith('.mov') || url.endsWith('.webm') || url.endsWith('.ogg')
 
-export const isVideoMime = (type) => type === 'video/mp4' || type === 'video/webm' || type === 'video/ogg';
+export const isVideoMime = (type) => type === 'video/mp4' || type === 'video/webm' || type === 'video/ogg'
 
-export const isImageMime = (type) => type === 'image/jpeg' || type === 'image/png' || type === 'image/webp' || type === 'image/svg+xml';
+export const isImageMime = (type) => type === 'image/jpeg' || type === 'image/png' || type === 'image/webp' || type === 'image/svg+xml'
 
-export const isGifMime = (type) => type === 'image/gif';
+export const isGifMime = (type) => type === 'image/gif'
+
+// 判断上传图片的宽高是否等于给定的宽高
+export const checkImageWHEqual = (file, width, height) => {
+  return new Promise(function (resolve, reject) {
+    const _URL = window.URL || window.webkitURL
+    const img = new Image()
+    img.onload = function () {
+      const valid = img.width === width && img.height === height
+      valid ? resolve() : reject()
+    }
+    img.src = _URL.createObjectURL(file)
+  })
+}

src/utils/validator.js

@@ -0,0 +1,19 @@
+export const isUrl = (rule, value, callback) => {
+  if (value === '') {
+    callback()
+    return
+  }
+  const pattern = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i
+  if (!pattern.test(value)) {
+    callback(new Error(rule.message))
+  }
+  callback()
+}
+
+export const isNumber = (rule, value, callback) => {
+  if (value <= 0) {
+    callback(new Error(rule.message))
+  } else {
+    callback()
+  }
+}

src/view/ad/content.vue

@@ -122,7 +122,7 @@ import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatOnlyDate } from '@/utils/format'
 import WarningBar from '@/components/warningBar/warningBar.vue'
-import { isImageMime, isVideoMime, isGifMime } from '@/utils/image'
+import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
 import {
   getAdContentList,
   addAdContent,
@@ -132,10 +132,19 @@ import {
   getAdContentById
 } from '@/api/adContent'
 import { getAdPositionList } from '@/api/adPosition'
+import { isUrl } from '@/utils/validator'
 
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
+const isDateEndGtStart = (rule, value, callback) => {
+  console.log('isDateEndGtStart', editForm.value.validStart, value)
+  if (value < editForm.value.validStart) {
+    callback(new Error(rule.message))
+  } else {
+    callback()
+  }
+}
 const rules = reactive({
   adType: [
     { required: true, message: '请选择广告类型', trigger: 'blur' }
@@ -144,13 +153,15 @@ const rules = reactive({
     { required: true, message: '请选择广告位', trigger: 'blur' }
   ],
   url: [
-    { required: true, message: '请输入跳转地址', trigger: 'blur' }
+    { required: true, message: '请输入跳转地址', trigger: 'blur' },
+    { validator: isUrl, message: '请输入正确的跳转地址', trigger: 'blur' }
   ],
   validStart: [
     { required: true, message: '请选择有效起始日期', trigger: 'blur' }
   ],
   validEnd: [
-    { required: true, message: '请选择有效截止日期', trigger: 'blur' }
+    { required: true, message: '请选择有效截止日期', trigger: 'blur' },
+    { validator: isDateEndGtStart, message: '有效截止日期必须大于起始日期', trigger: 'blur' },
   ],
   mediaUrl: [
     { required: true, message: '请上传媒体信息', trigger: 'blur' }
@@ -399,20 +410,14 @@ const beforeUpload = (file) => {
   }
 
   if (uploadInfo.value.mediaType === 'pic') {
-    const isSize = new Promise(function (resolve, reject) {
+    const isSize = checkImageWHEqual(
-      const width = uploadInfo.value.mediaWidth
+      file, uploadInfo.value.mediaWidth, uploadInfo.value.mediaHeight
-      const height = uploadInfo.value.mediaHeight
+    ).then(
-      const _URL = window.URL || window.webkitURL
+      () => {
-      const img = new Image()
-      img.onload = function () {
-        const valid = img.width === width && img.height === height
-        valid ? resolve() : reject()
-      }
-      img.src = _URL.createObjectURL(file)
-    }).then(() => {
         return file
-    }, () => {
+      },
-      ElMessage.error('上传文件宽X高必须为: ' + uploadInfo.value.mediaWidth + 'px X ' + uploadInfo.value.mediaHeight + 'px')
+      () => {
+        ElMessage.error('上传文件宽*高必须为: ' + uploadInfo.value.mediaWidth + 'px*' + uploadInfo.value.mediaHeight + 'px')
         return Promise.reject()
       })
     return isSize

src/view/ad/position.vue

@@ -81,17 +81,11 @@ import {
   getAdPositionById
 } from '@/api/adPosition'
 import { isImageMime } from '@/utils/image'
+import { isNumber } from '@/utils/validator'
 
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
-const checkNumber = (rule, value, callback) => {
-  if (value <= 0) {
-    callback(new Error(rule.message))
-  } else {
-    callback()
-  }
-}
 const rules = reactive({
   position: [
     { required: true, message: '请输入广告位名称', trigger: 'blur' }
@@ -100,10 +94,10 @@ const rules = reactive({
     { required: true, message: '请输入广告位标题', trigger: 'blur' }
   ],
   mediaWidth: [
-    { required: true, validator: checkNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
+    { required: true, validator: isNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
   ],
   mediaHeight: [
-    { required: true, validator: checkNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
+    { required: true, validator: isNumber, message: '请输入 > 0 的整数', trigger: 'blur' }
   ],
 })
 

src/view/content/components/articleEdit.vue

@@ -76,7 +76,7 @@
                   <el-option v-for="item in sourceOptions" :key="item" :label="item" :value="item" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="跳转链接" prop="source">
+              <el-form-item label="跳转链接" prop="url">
                 <el-input v-model="editForm.url" autocomplete="off" placeholder="https://" clearable />
               </el-form-item>
               <el-form-item label="发布时间">
@@ -154,6 +154,7 @@ import {
   getArticleById,
 } from '@/api/article'
 import { importFetcherArticleById } from '@/api/fetcher'
+import { isUrl } from '@/utils/validator'
 
 // 组件定义
 defineOptions({
@@ -203,6 +204,9 @@ const formRules = reactive({
   content: [
     { required: true, message: '请输入文章内容', trigger: 'blur' }
   ],
+  url: [
+    { validator: isUrl, message: '请输入正确的跳转地址', trigger: 'blur' }
+  ]
 })
 const articleTypeOptions = ref([
   { key: 1, label: '图文' },