element 表單驗證的三種方式

2021-10-06 15:27:44 字數 1461 閱讀 7563

目錄

第一種常用方式:表單上加rules{object}

第二種方式:在el-form-item單個新增

第三種方式:動態增減表單項

這種方式需要在data()中寫入rule{},對於需要校驗欄位prop中的如visitorname寫上驗證規則,如下:

data() ,

rule: ,,],

cardcode: [,,

$)|(^\d$)|(^\d(\d|x|x)$)/,

message: '請輸入正確的身份證號碼',

trigger: 'blur'}]}}}

其中對於有些需要自定義的校驗規則可以作為變數寫在data中:

data() $/

var validatenewpwd = (rule, value, callback) => else if (this.form.oldpasswd === value) else

}var validatecomfirmpwd = (rule, value, callback) => else if (this.form.newpasswd !== value) else

}return ,

rules: ,

],comfirmpwd: [,]}}}

比較適用於表單全部字段校驗或需要校驗字段型別比較簡單的資料型別

這種方式適用於需要個別檢驗的字段,或者表單字段有變動的校驗;

先看需求效果圖

對應的資料結構:

對應刪除增加表單項的操作為:

addphone() )

},deletephone(item) else

},

這樣的rule、prop直接寫就對應不上表單mode繫結的物件上的屬性,所以在此要用迴圈的方式找到要校驗的字段所在資料中的索引,然後再以字串拼接的方式連上校驗欄位名稱:

渲染出來的html為:

element表單驗證的封裝

這一篇文章是在用element中的表單的時候,會用到正則來判斷表單的對錯,當然正則的話得自己寫,比如這樣 但是我們開發的時候就會發現如果兩個元件都用到了這個正則那麼就會產生重複性,這還只是兩個,一般的話不止兩個,會有很多,會產生很多的重複的正則,那麼,就很煩,因為我們是要追求優雅,簡介的,誒,碰到我...

element表單驗證規則遇到的坑

一 首先是你需要為那幾個輸入框或者其他新增限制規則,你就要設定幾個規則並且命名最好和你繫結的值的關鍵字一樣 二 然後就是prop需要繫結在el form item上,如果el input外層還有多個el form item,必須寫在父級的標籤上,不然規則不會成功 自己看看結構例如 執法人員2 cla...

執行緒的三種建立方

一,繼承thread 重寫run class programmer extends thread public static void main string args 二,繼承runnable 實現run class programmer implements runnable public st...