element-ui 表單校驗 - 優化

element-ui 表單校驗 - 優化

在表單比較少的項目中, 一直都是按照官網的寫法:

<el-form-item label="主要停車場步行時間:" prop="walking_time" :rules="[{ required: true, message: '數據不能爲空', trigger: 'blur' },{ type: 'number', message: '輸入必須爲正整數', min: 0 }]">

  <el-input v-model="ruleForm.walking_time" class="width600" placeholder="請輸入步行時間"></el-input>

</el-form-item>
複製代碼

可是，在表單比較多的項目中，rules 校驗規則在表單中都是 重複性 工做。能夠試着將它抽取出來。

• 新建一個文件存放校驗規則。 rules.js

const required = true
const trigger = ['blur', 'change']

export const formValidate = {
  // 文本框必填校驗
  textRequired (message = '請填寫') {
    return {
      required,
      message,
      trigger
    },

  // 必須爲數字得校驗
  isNumberRule (message = '數字需爲0以上', min = 0) {
    return {
      type: 'number',
      message,
      min,
      trigger
    }
  }
  ......
  ......
  ......
}

複製代碼

• 直接用。 eg: test.vue

import formValidate form '@/rules.js'
export default {
  data () {
    return {
      formValidate
    }
  }
}

<el-form-item label="主要停車場步行時間:" prop="walking_time" :rules="[formValidate.textRequired('請輸入步行時間'), formValidate.isNumberRule()]">

   <el-input v-model="ruleForm.walking_time" class="width600" placeholder="請輸入步行時間"></el-input> </el-form-item> 複製代碼

---

雖然只是小小的換個寫法，可是對於表單比較多的項目，仍是能少些一下代碼的，而且看起來也簡潔了一點點。