产品链接添加校验规则

@@ -111,13 +111,17 @@
         >预览</el-button
       >
     </div>
+    <el-form ref="linkForm" size="mini" :model="linkForm" :rules="linkRules">
+      <el-form-item prop="link">
         <el-input
           class="mb10"
           type="textarea"
           :rows="5"
           style="width:500px"
-      v-model="productLink"
+          v-model="linkForm.link"
         ></el-input>
+      </el-form-item>
+    </el-form>
     <div class="bottom">
       <el-button type="primary" @click="submit">提交</el-button>
     </div>
@@ -139,6 +143,8 @@ import {
   productAdd
 } from '@/api/productInforManagement'
 
+const urlReg = /[a-zA-z]+:\/\/[^\s]*/
+
 export default {
   props: ['idAndCode'],
   data() {
@@ -152,6 +158,16 @@ export default {
       }
       callback()
     }
+    const validateLink = (rule, value, callback) => {
+      if (!value) {
+        return callback()
+      }
+      if (urlReg.test(value)) {
+        callback()
+      } else {
+        callback(new Error('请输入正确格式的产品链接'))
+      }
+    }
     return {
       inputMaxLength,
       fileList: [
@@ -193,7 +209,12 @@ export default {
         ]
       },
       currentFileIndex: 0,
-      productLink: ''
+      linkForm: {
+        link: ''
+      },
+      linkRules: {
+        link: [{ validator: validateLink, trigger: 'blur' }]
+      }
     }
   },
   computed: {
@@ -304,19 +325,23 @@ export default {
       })
     },
     previewLink() {
+      if (!this.linkForm.link || !urlReg.test(this.linkForm.link)) {
+        return
+      }
+      this.$refs.linkForm.validateField('link')
       const link = document.createElement('a')
-      link.href = this.productLink
+      link.href = this.linkForm.link
       link.target = '_blank'
       link.click()
     },
-    submit() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
+    async submit() {
+      try {
+        await this.$refs.form.validate()
+        await this.$refs.linkForm.validate()
         this.editOrAdd()
-        } else {
-          return false
+      } catch (error) {
+        console.log(error)
       }
-      })
     },
     async editOrAdd() {
       const formData = this.constructorFormData()
@@ -328,6 +353,7 @@ export default {
             message: '修改成功',
             type: 'success'
           })
+          this.$router.push({ path: 'product-infor-management' })
         }
       } else {
         const { code } = await productAdd(formData)
@@ -336,9 +362,9 @@ export default {
             message: '添加成功',
             type: 'success'
           })
+          this.$router.push({ path: 'product-infor-management' })
         }
       }
-      this.$router.push({ path: 'product-infor-management' })
     },
     constructorFormData() {
       const formData = new FormData()
@@ -356,7 +382,7 @@ export default {
         }
       })
 
-      formData.append('link', this.productLink)
+      formData.append('link', this.linkForm.link)
 
       return formData
     },
@@ -381,7 +407,7 @@ export default {
         file.url = item.url
       })
 
-      this.productLink = link
+      this.linkForm.link = link
     }
   }
 }