element-ui自定义表单校验json

87 阅读 0 评论 58 点赞

我是靠谱客的博主爱笑小丸子，这篇文章主要介绍element-ui自定义表单校验json，现在分享给大家，希望可以做个参考。

场景：

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