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。

<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

   可以是一個對象，也可以是一個驗證集合。

參考連結

javascript:void(0)

Boolean，表示該項是否是必填項，為true時表示必填。

示例：

{required: true, message: '請輸入必填項', trigger: 'blur'}

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

來進行轉換。

多種類型，一般為String，辨別該項在驗證不通過時顯示的資訊。

• 直接指派

{message: '請輸入名稱'}
           

或引入i18n國際化處理

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

• JSX

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

• 函數

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

Number，表示該項的資料範圍，如果類型是

string

或

array

，則表示長度值（

value.length

）的範圍，如果類型是數值類型（

number

integer

float

）則表示值的範圍。

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

Number，表示該項的長度，如果類型是

string

array

value.length

）的值必須等于len設定的值，如果類型是數值類型（

number

integer

float

）則表示該項的值必須等于len設定的值。

len

的優先級高于

min

max

。

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

取值為

blur/change

，

blur

表示失去焦點時才觸發驗證，

change

表示值改變時就觸發。

正規表達式，表示該項必須比對正規表達式才能通過驗證。

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

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

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

Array，表示該項隻能在枚舉出的集合裡。

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

Function，鈎子函數，表示在開始驗證前對資料進行處理，然後再進行驗證。

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

當然這裡隻是示例

transform

的用法，實際開發中要達到上述代碼效果，可以通過

v-mode.trim

的方式。

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

對于對象

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 }],
        }
    }
  }],
}
           

假設将表單的

ref

設定為

info

，代碼示例：

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

這樣就可以通過

this.$refs.info

拿到表單的執行個體，然後通過表單的4個方法對表單的驗證進行相應操作。

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

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