字段内容管理校验

src/views/manage/labelfieldcontent/index.vue

@@ -177,7 +177,7 @@
             placeholder="请选择字段信息"
             style="width: 260px"
             clearable
-            @change=change
+            @change="change"
           >
             <el-option
               v-for="item in labelfieldList"
@@ -229,12 +229,12 @@
             label="画像字段标识"
             :rules="rules.fieldContentList.fieldMark"
             :prop="`fieldContentList.${index}.fieldMark`"
+            
           >
             <el-input
               style="width: 260px"
               v-model="aitem.fieldMark"
               placeholder="请输入画像字段标识,例如:${content}"
-              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
             />
           </el-form-item>
           <el-form-item label="内容备注信息" prop="contentRemark">
@@ -288,7 +288,7 @@
             placeholder="请选择字段信息"
             style="width: 260px"
             clearable
-            @change=change
+            @change="change"
           >
             <el-option
               v-for="item in labelfieldList"
@@ -300,33 +300,21 @@
           </el-select> </el-form-item
         ><br />
 
-          <el-form-item
-            label="内容名称"
-         
-            prop="contentName"
-          >
+        <el-form-item label="内容名称" prop="contentName">
           <el-input
             v-model="form.contentName"
             placeholder="请输入内容名称"
             style="width: 260px"
           />
         </el-form-item>
-          <el-form-item
-            label="结果预览"
-
-            prop="resultPreview"
-          >
+        <el-form-item label="结果预览" prop="resultPreview">
           <el-input
             v-model="form.resultPreview"
             placeholder="请输入结果预览"
             style="width: 260px"
           />
         </el-form-item>
-          <el-form-item
-            label="内容排序"
-
-            prop="contentSort"
-          >
+        <el-form-item label="内容排序" prop="contentSort">
           <el-input-number
             v-model="form.contentSort"
             controls-position="right"
@@ -336,15 +324,12 @@
           />
         </el-form-item>
 
-          <el-form-item
-            label="画像字段标识"
-            prop="fieldMark"
-          >
+        <el-form-item label="画像字段标识" prop="fieldMark">
           <el-input
             style="width: 260px"
             v-model="form.fieldMark"
             placeholder="请输入画像字段标识,例如:${content}"
-              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
+
           />
         </el-form-item>
         <el-form-item label="内容备注信息" prop="contentRemark">
@@ -355,7 +340,6 @@
             style="width: 260px"
           />
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -371,6 +355,17 @@ import { listLabelfieldcontent, getLabelfieldcontent, delLabelfieldcontent, addL
 export default {
   name: "Labelfieldcontent",
   data() {
+
+    var validateInput = (rule, value, callback) => {
+      const regex =/^\$/;
+       if (!value) {
+          callback(new Error("画像字段标识不能为空"));
+        }else if (!regex.test(value)){
+        callback(new Error('画像字段标识格式有误，请以$开头'));
+        }else{
+        callback();
+        }
+      };
       return {
         // 遮罩层
         loading: true,
@@ -386,12 +381,12 @@ export default {
         total: 0,
         // 标签字段内容信息表格数据
         labelfieldcontentList: [],
-      labelfieldList:[],
+        labelfieldList: [],
         // 弹出层标题
         title: "",
         // 是否显示弹出层
         open: false,
-      openup:false,
+        openup: false,
         // 查询参数
         queryParams: {
           pageNum: 1,
@@ -410,7 +405,7 @@ export default {
         // 表单校验
         rules: {
           fieldId: [
-          { required: true, message: "画像标签和知识库字段表id不能为空", trigger: "blur" }
+            { required: true, message: "请选择字段信息", trigger: "blur" }
           ],
           fieldContentList: {
             contentName: [
@@ -436,15 +431,16 @@ export default {
             ],
             fieldMark: [
               {
+    
                 required: true,
-              message: "请输入画像字段表示",
                 trigger: "blur",
+                validator: validateInput
               },
             ],
 
           },
         },
-      rulesup:{
+        rulesup: {
           fieldId: [
             { required: true, message: "画像标签和知识库字段表id不能为空", trigger: "blur" }
           ],
@@ -472,8 +468,9 @@ export default {
           fieldMark: [
             {
               required: true,
-              message: "请输入画像字段表示",
+              // message: "请输入画像字段表示",
               trigger: "blur",
+              validator: validateInput
             },
           ],
 
@@ -503,8 +500,8 @@ export default {
         });
 
       },
-    change(e){
-      this.form.fieldName=this.labelfieldList.find(f=> f.id==e).fieldName
+      change(e) {
+        this.form.fieldName = this.labelfieldList.find(f => f.id == e).fieldName
         console.log(e)
 
       },
@@ -534,8 +531,8 @@ export default {
         this.reset();
       },
       // 修改取消
-        cancelup(){
-      this.openup=false,
+      cancelup() {
+        this.openup = false,
           this.reset();
 
       },
@@ -640,7 +637,7 @@ export default {
         }, `labelfieldcontent_${new Date().getTime()}.xlsx`)
       }
     }
-};
+  };
 </script>
 <style lang="scss">
 .el-input-number .el-input__inner {