ElementUI中el-form組件的rules參數(shù)舉例詳解

更新時間：2023年10月24日 10:35:32 作者：JAVA海洋里的小魚

Form組件提供了表單驗證的功能,只需要通過rules屬性傳入約定的驗證規(guī)則,并將Form-Item的prop屬性設置為需校驗的字段名即可,下面這篇文章主要給大家介紹了關于ElementUI中el-form組件的rules參數(shù)的相關資料,需要的朋友可以參考下

參數(shù)說明

屬性	類型	說明
type	String	用于驗證數(shù)據(jù)類型，默認類型為’string’
required	boolean	是否必填
pattern	regexp/string	字段值匹配正則表達式才能通過驗證
min和max	number	對于字符串和數(shù)組類型，將根據(jù)長度進行比較，對于數(shù)字類型，數(shù)字不得小于min，也不得大于max
len	number	對于字符串和數(shù)組類型，對length屬性執(zhí)行比較，對于數(shù)字類型，此屬性指示數(shù)字的完全匹配，len屬性與min和max屬性組合，則len優(yōu)先。
enum	array	type必須設置為enum，值必須包含在從可能值列表中才能通過驗證
trigger	blur/change	觸發(fā)驗證的時機，blur失去焦點時觸發(fā)，change:值發(fā)生改變時觸發(fā)
whitespace	boolean	type必須設置為string，要為僅包含空格的字符串可以whitespace設置為true
transform	function	在驗證之前轉換值
defaultField	array/object	type為數(shù)組或?qū)ο箢愋蜁r一起使用，用來驗證數(shù)組或?qū)ο笾邪乃兄担M行深層驗證
fields	object	type為數(shù)組或?qū)ο箢愋蜁r一起使用，分別驗證array/object類型的數(shù)據(jù)中的值，實現(xiàn)深度驗證
validator	function	驗證器，可以為指定字段自定義驗證函數(shù)：function(rule, value, callback)
asyncValidator	function	異步驗證器，可以為指定字段自定義異步驗證函數(shù) function(rule, value, callback)
message	string/jsx/function等	根據(jù)需要將消息分配給規(guī)則

下面詳細介紹參數(shù)屬性說明

type

表明要使用驗證器的類型，類似數(shù)據(jù)格式檢驗，其中還有email、url、regexp、method等特定格式字段的驗證。

使用這個，我們就可以對一些特定的字段進行校驗，而不用再像以前一樣寫正則，做判斷。

比如只需要配置 type:‘email’ 的規(guī)則就可以驗證email了，驗證器都已經(jīng)封裝好了這些功能，你只需調(diào)用就可以了。

可識別的類型值有：

string	字符串類型（默認值）
number	數(shù)字類型
boolean	布爾類型
method	函數(shù)類型
regexp	正則表達式
integer	整型
float	雙精度浮點型數(shù)字
array	數(shù)組類型
object	對象類型
enum	枚舉值
date	日期格式
url	網(wǎng)址格式
hex	16進制數(shù)字
email	電子郵箱格式
any	任意類型

//驗證電子郵箱的完整示例代碼
email = [{
    type: "string",
    required: true,
    message: '請輸入郵箱地址',
    trigger: 'blur'
  },
  {
    type: 'email',
    message: '請輸入正確的郵箱地址',
    trigger: ['blur', 'change']
  }
]

如上，實現(xiàn)了文本框失去焦點進行非空檢驗，失去焦點、內(nèi)容改變進行格式驗證，并給出相應提示.

required

必填字段，即非空驗證。如上面實例中的的非空驗證，以及郵箱前邊的必填符號*，就是這個參數(shù)的功勞。

pattern

正則表達式，如果需要驗證手機號碼之類，可以直接編寫正則表達式配置到校驗規(guī)則中，那么就不需要自己去校驗了，由校驗器自動校驗。

{ type : "string" , required: true , pattern : /^[a-z]+$/ }

min/max

判斷數(shù)據(jù)大小范圍，通常對數(shù)字大小范圍做校驗。對于字符串和數(shù)組類型，將根據(jù)長度進行比較。

{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }

len

長度驗證，如11位手機號碼。

roles: {
    type: "array", required: true, len: 11
}

trigger

取值為blur/change, blur失去焦點時觸發(fā)，change:值發(fā)生改變時觸發(fā)

enum

枚舉值驗證，示例代碼如下：

role: {type: "enum", enum: ['admin', 'user', 'guest']}

whitespace

驗證是否只有空格(如果沒有該配置，則全空格的輸入值也是有效的）。

whitespace: [{
    type: "string",
    message: '只存在空格',
    whitespace:true,
    trigger: ['change', 'blur']
}]

transform

有時有必要在驗證之前轉換值，以強制或以某種方式對其進行清理。為此 transform ，向驗證規(guī)則添加一個功能。在驗證之前，先轉換屬性，然后將其重新分配給源對象，以更改該屬性的值。

transform: [
 {
    type: 'enum',
    enum: [2,4,6], 
    message: `結果不存在`, 
    trigger: ['change', 'blur'],
    transform(value) {
      return Number(value * 2)
    }
  }
]

如上，只有輸入1、2、3的時候才能校驗通過,這個只能輔助校驗，并不能改變組件綁定變量本身的值。

fields

深層規(guī)則，可以通過將嵌套規(guī)則分配給規(guī)則的屬性來驗證object或array類型的驗證規(guī)則，如地址對象的省市區(qū)的規(guī)則驗證：

object類型：
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"}
    }
  }
array類型：
 roles: {
    type: "array", required: true, len: 3,
    fields: {
      0: {type: "string", required: true},
      1: {type: "string", required: true},
      2: {type: "string", required: true}
    }
  }

messages

未通過校驗的提示信息：

{name:{type: "string", required: true, message: "Name is required"}}

支持html:

{name:{type: "string", required: true, message: "<b>Name is required</b>"}}

支持vue-i18n:

{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}

validator

可以為指定字段自定義驗證函數(shù)——這就相當于把前邊配置的東西用js按照以前的方式編寫驗證邏輯了。雖然麻煩點，但是能實現(xiàn)比較復雜的業(yè)務邏輯判斷。

例如：判斷密碼是否為空

data(){
       var checkPass= (rules,value,callback) =>{
            if(value ==''){
                callback(new Error('請輸入密碼'));
            }else{
                callback();
            }
        }
        return{
            rules：{
                pass：[vaildatot:checkPass,trigger:blur]
            }
        }
}