elementUI form表單驗證規則使用詳解

2021-09-18 01:47:45 字數 998 閱讀 7342

elementui提供了form表單自帶有表單驗證規則,這裡簡單介紹下

比較簡單的表單驗證可以直接使用form自帶的,ele定義的驗證規則為rules陣列,在使用elementu表單驗證時可以向其傳入約定的驗證規則陣列,並將 form-item 的prop屬性設定為需校驗的欄位名即可

-立即建立

重置

export default ,

rules: ,

],region: [

],date1: [

],date2: [

],type: [

],resource: [

],desc: []}

};}

}

注意一點: 不同的form表單有不同的觸發事件,即trigger,有change和blur,如果寫錯的話會發現,填寫了正確的內容之後,但是紅色的表單驗證並沒有消失

對於相對複雜的驗證,form自帶的規則便不能滿足需求,這時需要自定義規則

可以用乙個變數或者常量來接收驗證規則

var checkage = (rule, value, callback) => 

const checkphone = (rule, value, callback) => else $/

if (reg.test(value)) else

if (value.length > 11)

}}

呼叫

rules: ],

linkmantel: ,

rtoln:

},

常用正規表示式請看這裡

(表單 表單的元素 表單的屬性)

表單 標籤名 1 form 表單 action 路徑 method 提交方式 2 method 提交方式 get提交 在路徑後面加引數 顯示的是 name 123 age 123 注意 鍵中不要加空格,加空格後所顯示的就不是想要的數值了 name 123 age 123 name 123 age 1...

寬度 表單 Form表單

塊級元素和行內元素 1.塊級元素獨佔一行,行內元素在同一行顯示 2.塊級元素預設寬度為100 行內元素由內容撐開 3.塊級元素可以設定寬高,行內元素不可以設定寬高 4.塊級元素可以設定margin和padding和四個方向,行內元素只可以設定margin和padding和左右值,上下不起作用 5.塊...

表單項 內聯表單

form class form inline div class form group label for exampleinputname2 name label input type text class form control id exampleinputname2 placeholder...