在檢驗(yàn)規(guī)則的代碼中，我們可以看到規(guī)則對(duì)象中包含required/message/trigger/min/max等參數(shù)，這些參數(shù)配合起來(lái)，可以完成我們以往要編寫(xiě)多行代碼才能實(shí)現(xiàn)的校驗(yàn)功能。

下面就詳細(xì)介紹

參數(shù)說(shuō)明

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

type

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

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

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

可識(shí)別的類(lèi)型值有：

//驗(yàn)證電子郵箱的完整示例代碼
email = [{
    type: "string",
    required: true,
    message: '請(qǐng)輸入郵箱地址',
    trigger: 'blur'
  },
  {
    type: 'email',
    message: '請(qǐng)輸入正確的郵箱地址',
    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)證，以及郵箱前邊的必填符號(hào)*，就是這個(gè)參數(shù)的功勞。

pattern

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

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

min/max

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

{ required: true, message: '請(qǐng)輸入活動(dòng)名稱(chēng)', trigger: 'blur' },
{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }

len

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

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

trigger

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

enum

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

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

whitespace

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

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

transform

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

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

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

fields

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

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

messages

未通過(guò)校驗(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按照以前的方式編寫(xiě)驗(yàn)證邏輯了。雖然麻煩點(diǎn)，但是能實(shí)現(xiàn)比較復(fù)雜的業(yè)務(wù)邏輯判斷。

例如：判斷密碼是否為空

data(){
       var checkPass= (rules,value,callback) =>{
            if(value ==''){
                callback(new Error('請(qǐng)輸入密碼'));
            }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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論