必填项校验

src/views/message/InnerSurvey.vue

@@ -306,11 +306,12 @@ a {
       <div class="item-main">
         <img src="../../assets/survey_logo.png" alt="" class="survey_logo" />
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <el-form ref="form" :model="form2" class="tpl_form over_y">
+        <el-form ref="form" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
           <el-form-item
             v-for="(item, index) in widgetList"
             :key="index"
             :label="item.label"
+            :prop="item.label"
           >
             <el-input
               v-if="item.type == 'input'"
@@ -503,6 +504,9 @@ export default {
   data() {
     return {
       //   checked: [],
+      rules1: {
+        rules:{}
+      },
       qrcodeUrl: "",
       cur_message_id: null,
       cur_post_type: null,
@@ -689,6 +693,7 @@ export default {
       this.$api.getMessageInfo({ id: row.id }).then((res) => {
         if (res.data.code == 0) {
           this.widgetList = res.data.data.widget;
+          let rules1 = {};
           this.widgetList.forEach((i) => {
             if (i.type == "checkbox") {
               //   _this.form2[i.label] = [] ;
@@ -700,8 +705,21 @@ export default {
             } else {
               _this.$set(_this.form2, i.label, i.result);
             }
+            //组装rules
+            if(i.type=="input"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            }
+            if(i.type=="textarea"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            }
+            if(i.type=="radio"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            }
+            if(i.type=="checkbox"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            }
           });
-          console.log(this.form2);
+          this.$set(this.rules1,"rules",rules1)
           //   debugger
           this.dialogVisible1 = true;
         }

src/views/message/Message.vue

@@ -258,11 +258,12 @@ a {
       <div class="item-main">
         <img src="../../assets/survey_logo.png" alt="" class="survey_logo" />
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <el-form ref="form" :model="form2" class="tpl_form over_y">
+        <el-form ref="form" :model="form2" class="tpl_form over_y" :rules="rules1">
           <el-form-item
             v-for="(item, index) in widgetList"
             :key="index"
             :label="item.label"
+            :prop="item.label"
           >
             <el-input
               v-if="item.type == 'input'"
@@ -429,6 +430,9 @@ export default {
   data() {
     return {
     //   checked: [],
+      rules1: {
+        "姓名": [{ required: true, message: "请输入标题", trigger: "blur" }],
+      },
       cur_message_id:null,
       cur_post_type:null,
       postResult:{},

src/views/message/OutSurvey.vue

@@ -276,11 +276,12 @@ a {
       <div class="item-main">
         <img src="../../assets/survey_logo.png" alt="" class="survey_logo" />
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <el-form ref="form" :model="form2" class="tpl_form over_y">
+        <el-form ref="form" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
           <el-form-item
             v-for="(item, index) in widgetList"
             :key="index"
             :label="item.label"
+            :prop="item.label"
           >
             <el-input
               v-if="item.type == 'input'"
@@ -474,6 +475,9 @@ export default {
   data() {
     return {
       //   checked: [],
+      rules1: {
+        rules:{}
+      },
       qrcodeUrl: "",
       cur_message_id: null,
       cur_post_type: null,
@@ -659,13 +663,27 @@ export default {
       this.$api.getMessageInfo({ id: row.id }).then((res) => {
         if (res.data.code == 0) {
           this.widgetList = res.data.data.widget;
+          let rules1 = {};
           this.widgetList.forEach((i) => {
             if (i.type == "checkbox") {
               //   _this.form2[i.label] = [] ;
               _this.$set(_this.form2, i.label, []);
             }
+            //组装rules
+            if(i.type=="input"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            }
+            if(i.type=="textarea"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            }
+            if(i.type=="radio"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            }
+            if(i.type=="checkbox"&&i.require){
+              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            }
           });
-          console.log(this.form2);
+          this.$set(this.rules1,"rules",rules1)
           //   debugger
           this.dialogVisible1 = true;
         }

src/views/message/modelForm.vue

@@ -386,6 +386,9 @@ export default {
 components: {vuedraggable},
   data(){
     return{
+      rules: {
+        "姓名": [{ required: true, message: "请输入标题", trigger: "blur" }],
+      },
       title:this.$route.query.title,
       edit:0,
       form:{name:'',page:1,page_size:20},