element-ui自定义表单校验json_el-input 只能输入json格式

场景：

• 当config的输入框输入不是jason格式的字符串时，提交的时候报错

 <el-form-item label="配置" prop="config">
          <el-input v-model="form.config" type="textarea" placeholder="请输入内容" />
        </el-form-item>
1
2
3

  data() {
      const checkJson = (rule,value,callback)=>{
                    try {
                        JSON.parse(value);
                    } catch (e) {
                        console.log("json 格式错误")
                        callback(new Error('json格式错误'));
                    }
                    callback()        
      }
    return {
     
      // 表单参数
      form: {},
      
    
      // 表单校验
      rules: {
       
        config: [
          { required: true, validator:checkJson, message: "请输入正确的json格式且不能为空", trigger: "blur" }
        ],
      }
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25