element中對el-input 自定義驗證規則

首先明確要使自定義校驗生效的話，必須 prop 和 rules 的 鍵對應，如示例：(prop="description"在 rules 中有對應的鍵 )

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
    <el-form-item label="描述：" prop="description">
        <el-input type="textarea" v-model="ruleForm.description" maxLengtn="128" placeholder="請輸入描述"></el-input>
    </el-form-item>
</el-form>

rules: {
    description: [{ required: true, message: '請輸入描述', trigger: 'blur' }]
}

自定義校驗傳入自定義參數

elementui的自定義校驗不能傳入自定義參數，如果想傳入自定義參數的話，可以如下操作：

rules: {
    description: [{ 
        validator: (rule, value, callback) => {
          this.validateType(rule, value, callback, this.params)
        },
        trigger: ['blur', 'change']
    }]
}

this.params 相當于自定義參數，然后 this.validateType中就可以接收到自定義的參數，并且也能對輸入框的值進行校驗了。

示例：驗證一個輸入框的值的類型，這個值的類型可能是['list', 'num', 'bool', 'str']中的一種或多種，但如果為 list 的話就只能是 list 類型

// 數據類型有 ['list', 'num', 'bool', 'str']

// 一個輸入框的數據類型的情況可能有
// 情況一：數據類型為 ['list']，那輸入值的數據類型就可能都滿足，就返回 true，最后將輸入框中的值用 split(',')轉為數組類型即可
// 情況二：數據類型為 ['num', 'bool', 'str']，那輸入的值比如 12/true/'abc'，用 typeof value 判斷輸入的數據類型

// let allTypes = ['list', 'num', 'bool', 'str']
/**
 * @param {*} arr 輸入框的數據類型
 * @param {*} value  輸入框的值
 */
function checkType (arr, value) {
  if (arr.includes('list') && arr.length === 1) { // 還不確定
    return true
  } else {
    // el-input 得到的值為字符串，所以需要處理，'1', 'true', '是', 0/1,使用 JSON.parse(value) 可以將對應類型的值轉換，如果 JSON.parse('abc') 會直接報錯
    try {
      value = JSON.parse(value)
    } catch (error) {
      // 字符串不做處理
    }
    if (['是', '否'].includes(value)) {
      value = value === '是'
    }
    return arr.some(item => {
      return (typeof value).indexOf(item) !== -1
    })
  }
}

console.log(checkType(['num', 'str', 'bool'], 'abc'))