新增表单验证

src/pages/serviceEdit.vue

@@ -14,7 +14,7 @@
           <img v-if="now_edit!==1" src="../assets/imgs/nav_ic_anquan_nor.png" alt=""> 服务安全设置</div>
       </div>
       <el-form ref="form" :rules="rules" :model="form" label-width="0px" v-if="now_edit==0">
-        <el-form-item>
+        <el-form-item prop="name">
           <p class="formname">服务名称：</p>
           <el-input v-model="form.name"></el-input>
         </el-form-item>
@@ -22,7 +22,7 @@
           <p class="formname">服务描述：</p>
           <el-input type="textarea" v-model="form.desc"></el-input>
         </el-form-item>
-        <el-form-item>
+        <el-form-item prop="area">
           <p class="formname">服务领域：</p>
           <el-select v-model="form.area" placeholder="请选择">
             <el-option
@@ -33,7 +33,12 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-if="now_user==0">
+        <el-form-item v-if="now_user==0"
+        prop="origin"
+        :rules="[
+          { required: true, message: '请选择所属组织', trigger: 'change' },
+        ]"
+         >
           <p class="formname">所属组织：</p>
           <el-select v-model="form.origin" placeholder="请选择">
             <el-option
@@ -58,19 +63,25 @@
           ></upload-file>
           <span class="removepic" v-if="now_user==2" @click="removepic">更换封面</span>
         </el-form-item>
-        <el-form-item v-if="now_user==0">
+        <el-form-item v-if="now_user==0" prop="code" :rules="[
+          { required: true, message: '请输入接口编码', trigger: 'blur' },
+        ]">
           <p class="formname">接口编码：</p>
           <el-input v-model="form.code"></el-input>
         </el-form-item>   
-        <el-form-item v-if="now_user==2">
+        <el-form-item v-if="now_user==2" prop="people" :rules="[
+          { required: true, message: '请输入发布人', trigger: 'blur' },
+        ]">
           <p class="formname">发布人：</p>
           <el-input v-model="form.people"></el-input>
         </el-form-item>   
-        <el-form-item v-if="now_user==2">
+        <el-form-item v-if="now_user==2" prop="phone" :rules="[
+          { required: true, message: '请输入联系方式', trigger: 'blur' },
+        ]">
           <p class="formname">联系方式：</p>
           <el-input v-model="form.phone"></el-input>
         </el-form-item>   
-        <el-form-item>
+        <el-form-item prop="resource">
           <p class="formname">开放程度：</p>
           <el-radio-group v-model="form.resource">
             <el-radio label="共享"></el-radio>
@@ -80,7 +91,7 @@
         </el-form-item>
         
         <el-form-item>
-          <el-button type="primary" @click="onSubmit" class="right">保存</el-button>
+          <el-button type="primary" @click="onSubmit('form')" class="right">保存</el-button>
           <el-button class="right">取消</el-button>
         </el-form-item>
       </el-form>
@@ -233,9 +244,20 @@ export default {
         ],
         origin_arr:[],
         rules:{
+          name:[
+            { required: true, message: '请输入服务名称', trigger: 'blur' },
+          ],
           desc:[
+            { required: true, message: '请输入服务描述', trigger: 'blur' },
             { max: 200, message: '长度小于200个字符', trigger: 'blur' }
-          ]
+          ],
+          area:[
+            { required: true, message: '请选择服务领域', trigger: 'change' },
+          ],
+          resource:[
+            { required: true, message: '请选择开放程度', trigger: 'change' },
+          ],
+          
         }
     };
   },
@@ -267,6 +289,7 @@ export default {
     },
     saveInfo(){
       console.log('2222');
+      
     },
     openstart(){
       this.open = !this.open
@@ -280,8 +303,16 @@ export default {
     removepic(){
       this.$refs.servicepic.handleRemove()
     },
-      onSubmit() {
+      onSubmit(formName) {
         console.log('submit!');
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
       },
       getNewList(val) {
         console.log(val);

src/pages/workPlace.vue

@@ -168,7 +168,7 @@
         >
           {{now_user == 0?'我的服务':'服务管理'}}
           <img
-            style="vertical-align:-9px;"
+            style="vertical-align:-9px;cursor: pointer;"
             src="../assets/imgs/home_btn_enter.png"
             @click="gotofw()"
             alt