element-ui自定义表单校验json

最新推荐文章于 2025-05-29 15:46:55 发布

Will Wang0715

最新推荐文章于 2025-05-29 15:46:55 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21209307/article/details/112853221

本文介绍了一个使用Vue.js实现的表单验证案例，当用户在配置项中输入非JSON格式的字符串时，表单会进行检查并提示错误。通过JSON.parse()方法结合try...catch结构来判断输入是否为有效的JSON格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

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

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

  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" }
        ],
      }
    };
  },