1. 程式人生 > 其它 >vue表單校驗(判空校驗+去重校驗)

vue表單校驗(判空校驗+去重校驗)

一:在表單中新增rules校驗屬性
<el-form
ref="addMenu"
:model="addMenu"
:rules="addRules"
label-position="right"
label-width="80px"
style="margin-left: 40px;"
>
<el-row>
<el-col :span="6">
<el-form-item label="標題" prop="title">
<el-input v-model="addMenu.title" maxlength="100" show-word-limit placeholder="請輸入標題" style="width: 90%;"></el-input>
</el-form-item>
</el-col>
  </el-row>
</el-form>
二:在data中新增校驗規則(其中的屬性名稱要和表單中的prop對應)
data () {
return {
addRules: {
title: [
{ required: true, validator: this.validateTitle, trigger: 'blur' }
],
publishTime: [
{ required: true, message: '請選擇發表時間' }
],
resourceType: [
{ required: true, message: '請選擇資源型別' }
],
summary: [
{ required: true, message: '請輸入摘要', min: 0, max: 1000, trigger: 'blur' }
]
},
}
}
三:去重校驗函式自定義(在method中定義):去重的具體方法放到了後臺處理(思路就是獲取到輸入的value,根據value查詢資料,如果查詢到就返回code200),前臺呼叫callback返回提示資訊
rule:指的是表單中rules屬性
value:指的表單輸入框中輸入的值
callback:回撥函式(再次呼叫校驗函式)
// 校驗標題
validateTitle (rule, value, callback) {
if (!value) {
callback(new Error('請輸入標題'))
} else {
this.$http({
url: this.$http.adornUrl('/resource/getByTitle/' + value),
method: 'GET'
}).then(res => {
const data = res.data
if (data.code === 200) {
callback(new Error('此標題已存在'))
} else {
callback()
}
})
}
},