在ElementUI中，使用JSON校驗可以讓我們更好地驗證用戶輸入的數(shù)據(jù)是否符合規(guī)范，為我們的前端開發(fā)提供更加良好的數(shù)據(jù)處理。下面我們來看一下如何使用ElementUI的JSON校驗。

首先，在data中定義需要校驗的數(shù)據(jù)，如下所示：

data(){
return{
form:{
name:'',
age:'',
email:''
},
rules:{
name:[
{ required:true, message:'請輸入姓名', trigger:'blur' }
],
age:[
{ required:true, message:'請輸入年齡', trigger:'blur' }
],
email:[
{ required:true, message:'請輸入郵箱', trigger:'blur' },
{ type:'email', message:'請輸入正確的郵箱地址', trigger:['blur','change'] }
]
}
}
}

在上述代碼中，我們定義了需要校驗的數(shù)據(jù)為form，其中包含了name、age和email三個字段。接著，我們定義了rules屬性來進行校驗，其中，name和age字段只需要驗證是否輸入即可，而email字段需要驗證是否輸入，同時需要符合email的格式。

接下來，在模板中，我們可以使用ElementUI的表單組件來進行數(shù)據(jù)的輸入和展示。同時，我們需要指定rules屬性為上述定義好的rules，如下所示：

<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-form>

在上述模板代碼中，我們使用了三個el-form-item組件，分別對應表單中的姓名、年齡和郵箱。其中，我們指定了prop屬性為對應的數(shù)據(jù)字段名稱，來進行數(shù)據(jù)的校驗。同時，我們使用了v-model來進行數(shù)據(jù)的雙向綁定，來方便我們對數(shù)據(jù)的存儲和展示。

最后，在點擊提交按鈕的時候，我們可以使用this.$refs.form.validate()來進行數(shù)據(jù)的校驗。如果校驗通過，則可以進行數(shù)據(jù)的提交操作，否則需要提示用戶修改對應的錯誤信息。如下所示：

submitForm(){
this.$refs.form.validate((valid)=>{
if(valid){
//TODO 數(shù)據(jù)提交操作
}else{
this.$message.error('請檢查輸入是否正確');
return false;
}
});
}

在上述代碼中，我們使用了this.$refs.form.validate()方法進行數(shù)據(jù)的校驗操作。當校驗通過的時候，我們可以進行數(shù)據(jù)的提交操作；否則，我們使用this.$message.error()方法來進行錯誤提示。