位置: IT常識 - 正文
【vue2】使用elementUI進行表單驗證實操（附源碼）(vue el-)
編輯：rootadmin推薦整理分享【vue2】使用elementUI進行表單驗證實操（附源碼）(vue el-)，希望有所幫助，僅作參考，歡迎閱讀內容。
文章相關熱門搜索詞:vue el-menu,vue2-elm,vue el-dialog,ele vue,vue el-dialog,vue el-dialog,vue2-elm,vue2-elm,內容如對您有幫助，希望把文章鏈接給更多的朋友！
🥳博???????主：初映CY的前說(前端領域)
🌞個人信條：想要變成得到，中間還有做到！
🤘本文核心：vue使用elementUI進行表單驗證實操（附源碼）
【前言】我們在構建一個項目中，基本是無法避免不使用表單來收集數(shù)據的。比如登錄注冊頁面，我們需要驗證輸入者的用戶名與密碼當都具有合法性與正確性的時候我們才可以進行注冊以及登錄的操作。當?shù)卿涍M頁面之后，還會涉及到數(shù)據的增刪改查操作，這都無一例外需要我們通過某一個載體來接收我們的數(shù)值，因此表單在項目中是很常見的，大家物必得學會呦。
目錄
一、表單校驗流程發(fā)請求流程
二、使用elementUI框架進行表單校驗
一、表單校驗流程發(fā)請求流程
收集數(shù)據、進行驗證、處理驗證通過與錯誤
二、使用elementUI框架進行表單校驗關于vue的UI庫介紹的文章大家請移步下面這個超鏈接：
UI與Vant組件庫的導入、注冊、使用方法
2.1.我們使用表單組件來講解，翻閱文檔看表單怎么用
組件 | Element
我們重點放在這樣的幾個點上面：model、rules、validate、prop、ref
model:用于綁定表單數(shù)據rules:用于表單驗證規(guī)則validate:任一表單項被校驗后觸發(fā)(被校驗的表單項 prop 值，校驗是否通過)prop:表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的ref用于選中我們的form表單?此刻我們的表單長這個樣子
此時關鍵源碼截圖：
2.2給每個<el-form-item>通過prop進行綁定下props,我們才能開啟校驗規(guī)則
類似于下圖這樣：綁定我們的數(shù)據進去
?2.3寫下我們的rules校驗規(guī)則
2.4rules校驗寫在data當中
required：必選項，message：錯誤提示，trigger:觸發(fā)方式（blur是失去焦點的時候觸發(fā)）
?當我寫下校驗規(guī)則之后，我們的圖標發(fā)現(xiàn)有了新的變化。左上角有了紅色星號
那我們來測試以下吧！
現(xiàn)在表單的一層數(shù)據校驗就完成了，接下還需要一層兜底校驗。這一層校驗是收集所有表單數(shù)據進行檢測，當檢測都通過了再執(zhí)行相應的規(guī)則。在這就是當我點擊 立即創(chuàng)建 的時候收集數(shù)據我們進行其他操作，比如發(fā)請求到服務器中，這里為了演示的難度就不寫發(fā)送請求的操作啦。發(fā)送ajax請求的文章請看博主vue專欄喔
2.5綁定點擊事件
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>2.6寫下校驗方法
onSubmit () { this.$refs.form.validate(valid => { console.log(valid) if (valid) { console.log('submit!,校驗通過') console.log('這是FormData:', this.FormData) } }) }2.7點擊查看
?嘿，可以看到當我們校驗通過了，valid形參打印的true,因此我們才獲取到了我們想看到的值。當我們表單數(shù)據但凡有一個有錯誤時，都不能走這個if為true的條件，這樣就完成了兜底校驗。一般這個表單是那里用？一般是登陸頁面用或者我們后管系統(tǒng)做增刪改查操作的時候會使用上表單驗證等技術。等驗證通過了我們再去發(fā)請求或者存儲數(shù)據等等操作。
【附上源碼】
<template><el-form ref="form" :model="FormData" label-width="80px" :rules="ruleForm"> <el-form-item label="活動名稱" prop="name"> <el-input v-model="FormData.name"></el-input> </el-form-item> <el-form-item label="活動時間" prop="date1"> <el-col :span="11"> <el-date-picker type="date" placeholder="選擇日期" v-model="FormData.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> </el-form-item> <el-form-item label="活動性質" prop="type"> <el-checkbox-group v-model="FormData.type" prop="type"> <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox> <el-checkbox label="地推活動" name="type"></el-checkbox> <el-checkbox label="線下主題活動" name="type"></el-checkbox> <el-checkbox label="單純品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="活動形式" prop="desc"> <el-input type="textarea" v-model="FormData.desc" prop="desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button> </el-form-item></el-form></template><script>export default { data () { return { ruleForm: { name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 2, max: 50, message: '活動名稱字數(shù)為2-50個字', trigger: 'blur' } ], date1: [ { required: true, message: '請選擇活動事件', trigger: 'blur' } ], type: [ { required: true, message: '請確定活動活動性質', trigger: 'blur' } ], desc: [ { required: true, message: '活動形式', trigger: 'blur' } ] }, FormData: { // 一定需要在data中上一篇：KITTI數(shù)據集可視化（一）：點云多種視圖的可視化實現(xiàn)
