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()
      }
    })
  }
},