快捷導(dǎo)航

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

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

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

參數(shù)說明

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

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

type

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

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

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

可識別的類型值有：

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

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

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

required

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

pattern

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

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

min/max

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

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

len

長度驗(yàn)證，如11位手機(jī)號碼。

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

trigger

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

enum

枚舉值驗(yàn)證，示例代碼如下：

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

whitespace

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

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

transform

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

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

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

fields

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

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

未通過校驗(yàn)的提示信息：

{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

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

例如：判斷密碼是否為空

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

總結(jié)

到此這篇關(guān)于ElementUI中el-form組件的rules參數(shù)舉例詳解的文章就介紹到這了,更多相關(guān)ElementUI el-form組件rules參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: