Browse Source

fix(sdkForm.vue):sdk表单验证,为空不能提交

liyangbin 2 years ago
parent
commit
c3f26d5fad
1 changed files with 33 additions and 23 deletions
  1. 33 23
      components/SdkForm.vue

+ 33 - 23
components/SdkForm.vue

@@ -19,14 +19,14 @@
       </div>
       <div class="email info-container"><input v-model="form.email" type="email" placeholder="电子邮箱">
         <div v-show="emptyItems.includes('email')" class="err">请输入电子邮箱</div>
-        <div v-show="emptyItems.includes('right-email')" class="err-email">请输入正确的电子邮箱</div>
+        <div v-show="!emptyItems.includes('right-email') && !emptyItems.includes('email')" class="err-email">请输入正确的电子邮箱</div>
       </div>
       <div class="job-phone info-container">
         <div class="job-title"><input v-model="form.job_title" type="text" placeholder="职位" >
           <div v-show="emptyItems.includes('job_title')" class="err">请输入职位</div>
         </div>
         <div class="phone-number"><input v-model="form.phone" type="text" placeholder="电话号码">
-          <div v-show="emptyItems.includes('phone')" class="err">请输入电话号码</div>
+          <div v-show="!emptyItems.includes('right-phone')" class="err">请输入电话号码</div>
         </div>
       </div>
       <div class="company info-container"><input v-model="form.company" type="text" placeholder="企业名称">
@@ -351,7 +351,7 @@ export default {
         number: '1',
         country:'Afghanistan'
       },
-      postSuccess: false
+      postSuccess: false,
     }
   },
   props:["labelText"],
@@ -365,9 +365,14 @@ export default {
         }
       })
       const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
-      if(!emptyItems.includes('email') && !regEmail.test(this.form.email)) {
+      if(!emptyItems.includes('email') && regEmail.test(this.form.email)) {
         emptyItems.push('right-email')
       }
+      const regPhone = /^1[3456789]\d{9}$/
+      if(!emptyItems.includes('phone') && regPhone.test(this.form.phone)) {
+        emptyItems.push('right-phone')
+      }
+      console.log(emptyItems)
       return emptyItems
     }
   },
@@ -376,25 +381,30 @@ export default {
       this.postSuccess = false
     },
     handlerSubmit() {
-      const data = new FormData()
-      data.append('contact_email[user_name]',this.form.first_name + this.form.last_name)
-      data.append('contact_email[email]',this.form.email)
-      data.append('contact_email[product_name]', '17PDF')
-      data.append('contact_email[email_subject]','Contact for SDK Plan')
-      data.append('detail[job]',this.form.job_title)
-      data.append('detail[phone]',this.form.phone)
-      data.append('detail[company]',this.form.company)
-      data.append('detail[website]',this.form.website)
-      data.append('detail[country]',this.form.country)
-      data.append('detail[applications]',this.form.number)
-      data.append('detail[platform]',this.form.platform)
-      data.append('detail[feature]',this.form.feature)
-      data.append('detail[label]',this.labelText)
-      this.$axios.post('https://content.pdfreaderpro.com/api/contact',data).then((res) => {
-        if(res.status === 200) {
-          this.postSuccess = true
-        }
-      })
+      if(!this.emptyItems.includes('website') && !this.emptyItems.includes('last_name') 
+        && this.emptyItems.includes('right-email') && !this.emptyItems.includes('job_title') 
+        && this.emptyItems.includes('right-phone') && !this.emptyItems.includes('company')
+        && !this.emptyItems.includes('website')){
+        const data = new FormData()
+        data.append('contact_email[user_name]',this.form.first_name + this.form.last_name)
+        data.append('contact_email[email]',this.form.email)
+        data.append('contact_email[product_name]', '17PDF')
+        data.append('contact_email[email_subject]','Contact for SDK Plan')
+        data.append('detail[job]',this.form.job_title)
+        data.append('detail[phone]',this.form.phone)
+        data.append('detail[company]',this.form.company)
+        data.append('detail[website]',this.form.website)
+        data.append('detail[country]',this.form.country)
+        data.append('detail[applications]',this.form.number)
+        data.append('detail[platform]',this.form.platform)
+        data.append('detail[feature]',this.form.feature)
+        data.append('detail[label]',this.labelText)
+        this.$axios.post('https://content.pdfreaderpro.com/api/contact',data).then((res) => {
+          if(res.status === 200) {
+            this.postSuccess = true
+          }
+        })
+      }
     }
   }
 }