element-ui表單驗證使用

element-ui的表單驗證主要分三部分:

1. validate
2. options
3. rules

最常用的是rules.

定義rule可以有三種形式:

1. 函數： { name(rule, value, callback, source, options) {} }
2. 對象： { name: { type: 'string', required: true } }
3. 數組： { name: [{ type: 'string' }, { required: true }] }

函數的方式我自己也沒有學會,暫時不說了.對象和數組的方式比較簡單,也比常用.數組的方式,其實就是對象的方式的組合.

element-ui有定義好了很多的預設規則,并且還可以使用預設規則裡的validator進行擴充自定義.

預設規則:

• type: 資料的類型,預設的type見"預設type"一節
• required： 是否必填,true or false
• pattern：使用正則來驗證
• min: 資料的長度的最小值 (資料類型必須是string或array)
• max: 資料的長度的最大值 (資料類型必須是string或array)
• len: 資料的長度必須等于這個值 (資料類型必須是string或array)
• enum: 資料的值必須等于這個枚舉數組某個元素 { enum: [a, b, c] },注意需要type設定為enum
• transform: 一個鈎子函數，在開始驗證之前可以對資料先處理後驗證，如吧number轉為string後再驗證
• message: 報錯的提示資訊,可以是字元串也可以是jsx标簽Name is required
• validator: 自定義驗證函數以及報錯資訊 validator_name(rule, value, callback)

預設的type(對應預設規則的type部分取值):

• string：String類型，type預設的取值
• number：Number類型，如果背景傳回的資料是字元串，可以用transform轉為Number類型
• boolean: Boolean類型
• method: 必須是Function
• regexp：必須是正則RegExp
• integer：是Number類型的正整數
• float: 是Number類型的浮點數
• array: 是Array.isArray通過的數組
• object: Array.isArray不通過的Object類型
• enum: 先定義enum，值必須是enum枚舉數組某個元素
• date: Date對象的執行個體
• url: String類型且符合連結格式
• hex: Hex類型(十六進制)
• email: String類型且符合郵箱格式

示例一,對象形式:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="清單标題"
  prop="title"
  :rules="{
  required: true, min:2, max:128, message: '親,至少要輸入兩個字', trigger: 'blur'
  }">
    <el-input placeholder="請輸入清單标題" v-model="addForm.title"></el-input>
  </el-form-item>
</el-form>           

data() {
  return {
    addForm: {
      title: ''
    }
  }
}           

示例二,數組形式:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="清單标題"
  prop="title"
  :rules="[
    {required: true, message: '親,必須要輸入點東西', trigger: 'blur'},
    {min:2, max:128,message: '親,至少輸入兩個字;最多不超過128個字', trigger: 'blur'}
  ]">
    <el-input placeholder="請輸入清單标題" v-model="addForm.title"></el-input>
  </el-form-item>
</el-form>           

示例三,自定義驗證函數:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="年齡"
  :prop="age"  
  :rules="{
    validator: rule_age,trigger: 'blur'
  }">
    <el-input placeholder="請輸入年齡" v-model="addForm.age" auto-complete="off"></el-input>
  </el-form-item>
</el-form>
....
// 年齡校驗方法
  rule_age(rule,value,callback) {
    // 0如果是合法值,需要單獨判斷,否則會被!value作為真
    if (value === 0) {
       return callback()
    }

    if (!value) {
      return callback(new Error('請輸入年齡'));
    };
 
    let n = Number(value);
 
    if (n < 1) {
       return callback(new Error('年齡不能小于1歲'));
    } else if (n > 200) {
       return callback(new Error('年齡不能大于200歲'));
    };
 
    callback();
  },
...
  // 送出,$refs.addForm 對應ref="addForm"
  submit() {
    this.$refs.addForm.validate((valid) => {
      if (valid) {
        console.log("驗證通過")
      } else {
        console.log("驗證不通過")
        return false
      }