ElementUI學習之-rules詳解

目錄

• 前言
• rules的使用
  • 表單統一驗證
  • 表單項單獨驗證
  • 示例
• rules的參數
  • required
  • type
  • message
  • min和max
  • len
  • trigger
  • pattern
  • whitespace
  • enum
  • transform
  • validator
    • 進階用法
• Deep rules 深層規則
• rules的結果
  • validate
  • validateField

前言

ElementUI組件庫中表單校驗默認使用的是async-validator，所以要了解ElementUI表單驗證的rules規則，先了解async-validator。

rules的使用

表單統一驗證

<el-form :rules="rulesForm">
	<el-form-item prop="ruleName">
	</el-form-item>
</el-form>

上述代碼表示表單統一使用rulesForm（也可以使用其他名稱）來進行驗證，然后每個需要驗證的表單項通過prop指定驗證的字段名。

表單項單獨驗證

<el-form>
	<el-form-item :rules="rulesItem1">
	</el-form-item>
</el-form>

上述代碼表示表單項使用rulesItem1（也可以使用其他名稱）來進行驗證。
PS：可以在data中定義，也可以直接將規則寫在屬性上。

示例

data: {
	rulesForm: {
		ruleName: [
			{required: true, message: '請輸入名稱', trigger: 'change'},
			{min: 3, max: 10, message: '名稱長度在3到10個字符', trigger: 'blur'},
			...
		],
		...
	}
	rulesItem1: [
		{required: true, message: '請輸入名稱', trigger: 'change'}
		{min: 3, max: 10, message: '名稱長度在3到10個字符', trigger: 'blur'}
	]
}

注意：

1. 表單統一驗證rulesForm是一個對象。
2. 表單項單獨rolesItem1可以是一個對象，也可以是一個驗證集合。

rules的參數

參考鏈接
https://www.cnblogs.com/wozho/p/10955525.html
https://www.cnblogs.com/alabo1999/p/14990310.html

required

Boolean，表示該項是否是必填項，為true時表示必填。
示例：
{required: true, message: '請輸入必填項', trigger: 'blur'}

type

String，表示該項的數據類型，不符合類型要求，則驗證不通過，顯示錯誤信息。
支持的類型如下：

• string: String類型，這是默認值。
• number: Number類型，包含整數和小數。
• integer： 整數。
• float：小數，此時不能為整數，必須有小數點。
• boolean：Boolean類型，true/false。
• array：Array類型。
• object：Object類型，不能為數組。
• enum：Enum類型，需要搭配enum參數指定枚舉項。
• method：function類型。
• regexp：正則類型，值必須是一個合法的正則表達式，可以通過new RegExp來創建。
• date：Date類型，值必須可以轉為有效日期值。
• url：Url類型，值必須符合url格式。
• email：Email類型，值必須符合郵箱格式。
• hex：16進制類型，如0xFFF
• any：任意類型，不限制。

類型url和email，是可以直接用於相關值的校驗的，比如：

{type: 'email', message:'請輸入正確的郵箱格式', trigger: 'blur'}

類型number,integer,float以及boolean類型，由於控件input輸入的都是字符串，因此必須進行類型轉換，否則驗證不通過，可以搭配transform來使用。
類型number，可以通過數據綁定時指定v-mode的修飾符v-mode.number來進行轉換。

message

多種類型，一般為String，標識該項在驗證不通過時顯示的信息。

• 直接賦值

{message: '請輸入名稱'}

或引入i18n國際化處理

{message: this.$t('nameRequried')}

• JSX

{message: <br>請輸入名稱</br}>}

• 函數

{message: ()=> this.nameMessageHandle(messageId, paramValues)}

min和max

Number，表示該項的數據范圍，如果類型是string或array，則表示長度值（value.length）的范圍，如果類型是數值類型（number,integer,float）則表示值的范圍。
示例：

{min: 3, max: 10, message: '名稱長度在3到10個字符', trigger: 'blur'}

len

Number，表示該項的長度，如果類型是string或array，則表示長度值（value.length）的值必須等於len設置的值，如果類型是數值類型（number,integer,float）則表示該項的值必須等於len設置的值。
len的優先級高於min和max。
示例：

{len: 6, message: '長度為6, trigger: 'blur'}

trigger

取值為blur/change，blur表示失去焦點時才觸發驗證，change表示值改變時就觸發。

pattern

正則表達式，表示該項必須匹配正則表達式才能通過驗證。
示例：

{pattern: /^\d*$/, message: '只能輸入數字', trigger: 'blur'}

whitespace

Boolean，表示該項是否將空白(空格)視為錯誤，為true時表示空白（空格）時驗證不通過。
示例：

{whitespace: true, message: '只存在空格', trigger: 'blur'}

enum

Array，表示該項只能在枚舉出的集合里。
示例：

{type: "enum", enum: ['admin', 'user', 'guest'], message: '結果不存在', trigger: 'blur'}

transform

Function，鈎子函數，表示在開始驗證前對數據進行處理，然后再進行驗證。
示例：

{type: 'string', required: true, message: '請輸入必填項', transform(value){
	return value.trim();
}}

當然這里只是示例transform的用法，實際開發中要達到上述代碼效果，可以通過v-mode.trim的方式。

validator

Function，自定義校驗函數，表示使用指定方法進行規則校驗。
函數格式：function(rule, value, callback, source, options)
參數含義如下：

• rule：指向規則的對象，其中的 field 屬性是當前正在校驗字段的名稱。
• value：當前校驗字段的值。
• callback: 校驗結束的回調函數，校驗通過則不帶參數，直接調用callback()，如果校驗不通過，則帶一個Error錯誤參數，如callback(new Error('具體的錯誤提示信息'))，關於Error的用法，參考這里
• source：調用校驗的屬性對象，不常用。
• options: 附加參數，不常用。
  示例：

validatorTrim: (rule, value, callback)=>{
	if (value?.trim()) {
		callback();
	} else {
		callback(new Error('不能為空或空白'));
	}
}

當然這里只是示例validator的用法，實際開發中要達到上述代碼效果，可以使用whitespace規則。

進階用法

可以創建攜帶參數的校驗函數，如：

validatorRange: (min, max) => (rule, value, callback) =>{
	if(value >= min && value <= max) return callback();
	else return callback(new Error(`請輸入${min}到${max}的數字`))
}

使用時：

age: [
	{validator: validatorRange(1,100), trigger: 'blur'}
]

當然這里只是示例帶參數的validator的用法，實際開發中要達到上述代碼效果，可以使用min和max規則。

Deep rules 深層規則

對於對象object或數組array的校驗，如果需要深入具體到每一個元素或成員，就需要用到Deep rules。
Deep rules 需要涉及fields和defaultField兩個屬性
對象的深層校驗示例：

{
  address: {
    type: 'object',
    required: true,
    fields: {
      street: [{type: 'string', required: true}],
      city: [{type: 'string', required: true}],
      zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
    },
    ...
  },
  ...
}

數組的深層校驗示例：

{
  roles: [{
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: [{ type: 'string', required: true }],
      1: [{ type: 'string', required: true }],
      2: [{ type: 'string', required: true }],
    },
  }],
}

數組的深層校驗fields看起來都是重復的，如果每個成員都是相同的校驗規則，那么就使用defaultField屬性。
示例：

{
  urls: [{
    type: 'array',
    required: true,
    defaultField: { type: 'url' },
  }],
}

數組和對象可以繼續嵌套數組和對象。
示例：

{
  persons: [{
    type: 'array',
    required: true,
    defaultField:{
        type: 'object',
        required: true,
        fields: {
            address: [{
                type: 'object',
                required: true,
                fields: {
                    street: [{ type: 'string', required: true }],
                    city: [{ type: 'string', required: true }],
                    zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
                },
            }],
            name: [{ type: 'string', required: true }],
        }
    }
  }],
}

rules的結果

假設將表單的ref設定為info，代碼示例：

<el-form :mode="infoForm" :rules="infoRules" ref="info">
...
</el-form>

這樣就可以通過this.$refs.info拿到表單的實例，然后通過表單的4個方法對表單的驗證進行相應操作。

validate

通過validate方法對校驗整個表單。
示例：

this.$refs.info.validate((valid) => {
  if(valid){
    ...//都驗證通過后執行操作
  }
})

validateField

通過validateField方法校驗表單的某個字段。
示例：

this.$refs.info.validateField('name', error => {
  if(!error){
    ...//驗證通過后執行操作
  } else {
    ...//驗證失敗后執行操作
  }
})