關于element中對el-input 自定義驗證規(guī)則

更新時間：2022年08月04日 09:54:05 作者：風如也

這篇文章主要介紹了關于element中對el-input 自定義驗證規(guī)則，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element對el-input 自定義驗證規(guī)則

首先明確要使自定義校驗生效的話，必須 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' }]
}

自定義校驗傳入自定義參數(shù)

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

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

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

示例：

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

// 數(shù)據(jù)類型有 ['list', 'num', 'bool', 'str']
// 一個輸入框的數(shù)據(jù)類型的情況可能有
// 情況一：數(shù)據(jù)類型為 ['list']，那輸入值的數(shù)據(jù)類型就可能都滿足，就返回 true，最后將輸入框中的值用 split(',')轉為數(shù)組類型即可
// 情況二：數(shù)據(jù)類型為 ['num', 'bool', 'str']，那輸入的值比如 12/true/'abc'，用 typeof value 判斷輸入的數(shù)據(jù)類型
// let allTypes = ['list', 'num', 'bool', 'str']
/**
 * @param {*} arr 輸入框的數(shù)據(jù)類型
 * @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'))

element-ui自定義表單驗證,但是不出現(xiàn)小紅心了

基本上按照文檔上提供的方式做就沒啥大問題 , 我遇到的問題是 , 自定義以后不顯示小紅星了

<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
? <el-form-item label="密碼" prop="pass">
? ? <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
? </el-form-item>
? <el-form-item label="確認密碼" prop="checkPass">
? ? <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
? </el-form-item>
? <el-form-item label="年齡" prop="age">
? ? <el-input v-model.number="ruleForm2.age"></el-input>
? </el-form-item>
? <el-form-item>
? ? <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
? ? <el-button @click="resetForm('ruleForm2')">重置</el-button>
? </el-form-item>
</el-form>

<script>
? export default {
? ? data() {
? ? ? var checkAge = (rule, value, callback) => {
? ? ? ? if (!value) {
? ? ? ? ? return callback(new Error('年齡不能為空'));
? ? ? ? }
? ? ? ? setTimeout(() => {
? ? ? ? ? if (!Number.isInteger(value)) {
? ? ? ? ? ? callback(new Error('請輸入數(shù)字值'));
? ? ? ? ? } else {
? ? ? ? ? ? if (value < 18) {
? ? ? ? ? ? ? callback(new Error('必須年滿18歲'));
? ? ? ? ? ? } else {
? ? ? ? ? ? ? callback();
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }, 1000);
? ? ? };
? ? ? var validatePass = (rule, value, callback) => {
? ? ? ? if (value === '') {
? ? ? ? ? callback(new Error('請輸入密碼'));
? ? ? ? } else {
? ? ? ? ? if (this.ruleForm2.checkPass !== '') {
? ? ? ? ? ? this.$refs.ruleForm2.validateField('checkPass');
? ? ? ? ? }
? ? ? ? ? callback();
? ? ? ? }
? ? ? };
? ? ? var validatePass2 = (rule, value, callback) => {
? ? ? ? if (value === '') {
? ? ? ? ? callback(new Error('請再次輸入密碼'));
? ? ? ? } else if (value !== this.ruleForm2.pass) {
? ? ? ? ? callback(new Error('兩次輸入密碼不一致!'));
? ? ? ? } else {
? ? ? ? ? callback();
? ? ? ? }
? ? ? };
? ? ? return {
? ? ? ? ruleForm2: {
? ? ? ? ? pass: '',
? ? ? ? ? checkPass: '',
? ? ? ? ? age: ''
? ? ? ? },
? ? ? ? rules2: {
? ? ? ? ? pass: [
? ? ? ? ? ? { validator: validatePass, trigger: 'blur' }
? ? ? ? ? ],
? ? ? ? ? checkPass: [
? ? ? ? ? ? { validator: validatePass2, trigger: 'blur' }
? ? ? ? ? ],
? ? ? ? ? age: [
? ? ? ? ? ? { validator: checkAge, trigger: 'blur' }
? ? ? ? ? ]
? ? ? ? }
? ? ? };
? ? },
? ? methods: {
? ? ? submitForm(formName) {
? ? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? ? if (valid) {
? ? ? ? ? ? alert('submit!');
? ? ? ? ? } else {
? ? ? ? ? ? console.log('error submit!!');
? ? ? ? ? ? return false;
? ? ? ? ? }
? ? ? ? });
? ? ? },
? ? ? resetForm(formName) {
? ? ? ? this.$refs[formName].resetFields();
? ? ? }
? ? }
? }
</script>

我只是照著改了一下

let validatePass = (rule, value, callback) => {
? ? ? console.log(rule);
? ? ? console.log(value);
? ? ? console.log(callback);
? ? ? if (!value) {
? ? ? ? return callback(new Error("請?zhí)顚懝久Q"));
? ? ? }
? ? ? if (this.form.id) {
? ? ? ? callback();
? ? ? ? return true;
? ? ? }
? ? ? readScmSupplierPage({ name: this.form.name ,type:'2'})
? ? ? ? .then(res => {
? ? ? ? ? if (res.data.length > 0) {
? ? ? ? ? ? callback(new Error("名稱重復"));
? ? ? ? ? } else {
? ? ? ? ? ? callback();
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch(err => {
? ? ? ? ? console.log(err);
? ? ? ? });
? ? };

基本上和自定義沒啥關系

rules: {
? ? ? ? // name: [{ required: true, message: "請輸入公司名稱", trigger: "blur" }],
? ? ? ? name: [{ required: true, validator: validatePass, trigger: "blur" }],
? ? ? ? abbreviation: [
? ? ? ? ? { required: true, message: "請輸入公司簡稱", trigger: "blur" }
? ? ? ? ]
? ? ? },

只是我發(fā)現(xiàn)如果自定義了 , 在這個地方加required: true, 是不起作用的, 必須在form表單上面加

<el-form-item label="公司名稱" :label-width="formLabelWidth" prop="name" required>
? ? ? ? ? <el-input v-model="form.name"></el-input>
? ? ? ? </el-form-item>

就這樣小紅星星就出現(xiàn)啦

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

laravel5.3 vue 實現(xiàn)收藏夾功能實例詳解
這篇文章主要介紹了laravel5.3 vue 實現(xiàn)收藏夾功能，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2018-01-01
vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實現(xiàn)的拖拽功能示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-02-02
Vue-cli打包后部署到子目錄下的路徑問題說明
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue實現(xiàn)消息的無縫滾動效果的示例代碼
本篇文章主要介紹了vue實現(xiàn)消息的無縫滾動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
vue 彈出框引入另一個vue頁面的示例代碼
這篇文章主要介紹了vue 彈出框引入另一個vue頁面,這種方式適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2023-08-08
vue3.0中使用element的完整步驟
這篇文章主要給大家介紹了關于vue3.0中使用element的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
vuex實現(xiàn)購物車功能
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue組件之間的通信你知道多少
這篇文章主要為大家詳細介紹了Vue組件之間的通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue-test-utils初使用詳解
這篇文章主要介紹了vue-test-utils初使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
關于element-ui表頭吸附問題的解決方案
數(shù)據(jù)過多滑動表格的時候,看不到表頭不知道對應的數(shù)據(jù)是什么,用戶體驗操作不友好,要改成表頭固定住,所以本文給大家介紹了關于element-ui表頭吸附問題的兩個解決方案,需要的朋友可以參考下
2024-01-01