表单验证

src/views/user/form.vue

@@ -109,6 +109,7 @@ export default Vue.extend({
           return
         }
         this.loading = true
+        let hasInvalid = false
         const form_data = {}
         for (let i = 0; i < this.from_data.form_fields.length; i++) {
           if (this.from_data.form_fields[i].field_name) {
@@ -117,18 +118,37 @@ export default Vue.extend({
             form_data['field_' + this.from_data.form_fields[i].id] = this.from_data.form_fields[i].value
           }
 
-          if (this.from_data.form_fields[i].is_required && !this.from_data.form_fields[i].value) {
-            this.$message.error('请填写必填项')
-            this.loading = false
-            return
+          if ((this.from_data.form_fields[i].is_required && !this.from_data.form_fields[i].value) ||
+              (this.from_data.form_fields[i].field_data.pattern && !this.from_data.form_fields[i].value.match(this.from_data.form_fields[i].field_data.pattern))) {
+            hasInvalid = true
+            this.from_data.form_fields[i].invalid = true
+          } else {
+            this.from_data.form_fields[i].invalid = false
           }
         }
-        submitForm(this.expo_id, form_data).then(res => {
-          this.isOk = true
-          this.loading = false
-        }).catch(err => {
+        if (hasInvalid) {
+          this.$message.error('请正确填写表单')
+          window.scrollTo(0, 0)
           this.loading = false
-        })
+          setInterval(() => {
+            for (let i = 0; i < this.from_data.form_fields.length; i++) {
+              if ((this.from_data.form_fields[i].is_required && !this.from_data.form_fields[i].value) ||
+                (this.from_data.form_fields[i].field_data.pattern && !this.from_data.form_fields[i].value.match(this.from_data.form_fields[i].field_data.pattern))) {
+                this.from_data.form_fields[i].invalid = true
+              } else {
+                this.from_data.form_fields[i].invalid = false
+              }
+            }
+            this.$forceUpdate()
+          }, 1000)
+        } else {
+          submitForm(this.expo_id, form_data).then(res => {
+            this.isOk = true
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+          })
+        }
       } else {
         this.$confirm('请先登录', '提示', {
           type: 'warning',
@@ -163,8 +183,8 @@ export default Vue.extend({
 </script>
 
 <template>
-  <div class="no-info" v-if="noForm">
-    <img class="not-found" src="/static/image/404.webp"/>
+  <div v-if="noForm" class="no-info">
+    <img class="not-found" src="/static/image/404.webp">
     <div class="info">此链接无效，请向管理员咨询。</div>
   </div>
   <div v-else class="body">
@@ -183,7 +203,7 @@ export default Vue.extend({
       </div>
       <div v-else class="form-body">
         <div v-for="item in from_data.form_fields" :key="item.id" :style="{gridColumn:'span '+item.field_data.width}" class="form-item">
-          <div class="label" :class="item.is_required?'required':''">{{ item.field_label }}</div>
+          <div class="label" :class="[item.is_required?'required':'',item.invalid?'invalid':'']">{{ item.field_label }}</div>
           <el-select v-if="item.field_name==='id_type'" v-model="item.value">
             <el-option value="Passport" label="护照" />
             <el-option value="ID Card" label="身份证" />
@@ -461,6 +481,14 @@ export default Vue.extend({
               color: red;
             }
           }
+          &.invalid{
+            color: red;
+            &::before{
+              content: '请正确填写内容！';
+              display: block;
+              font-size: 12px;
+            }
+          }
         }
       }
     }