溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ElementUI多個子組件表單的校驗管理實現(xiàn)

發(fā)布時間：2020-09-30 05:57:43 來源：腳本之家 閱讀：205 作者：李棠輝 欄目：web開發(fā)

背景

公司項目中所用到的前端框架是Vue.js + ElementUI，因為項目的業(yè)務(wù)場景中有很多的大表單，但是ElementUI的表單寫法對于表單的拆分和校驗其實并不是很友好。最初的項目為了方便，常常把多個表單寫在一個.vue組件中，這導致單文件的代碼量巨大，邏輯十分復雜。目前為了維護方便，表單的拆分就變得十分重要。

現(xiàn)在做了以下的Demo說明我們的業(yè)務(wù)場景，父組件是App.vue，該組件中包含了PersonForm.vue和AdsForm.vue這兩個子組件（在實際的業(yè)務(wù)場景中，可能多達10+表單）。【提交】按鈕在父組件App.vue中，當點擊【提交】按鈕后，應(yīng)該分別校驗各個子組件，如果每個子組件都校驗成功后再進行提交。

ElementUI多個子組件表單的校驗管理實現(xiàn)

Demo

PersonForm.vue文件

下面的代碼是PersonForm.vue組件，該表單包括姓名、年齡、性別。我們使用了PersonForm這個類去實例化組件中的personForm的值。在PersonForm中有個static方法getRule去獲取校驗方法去獲取校驗對象，該校驗對象是ElementUI要求的寫法，會在<el-form>的rules中定義。

<template>
 <div class="person-form">
  <h3>PersonForm.vue</h3>
  <el-form :model="personForm" ref="personForm" :rules="personFormRules">
   <!-- 姓名 -->
   <el-form-item label="姓名" prop="name">
    <el-input v-model="personForm.name"></el-input>
   </el-form-item>
   <!-- 年齡 -->
   <el-form-item label="年齡" prop="age">
    <el-input v-model="personForm.age"></el-input>
   </el-form-item>
   <!-- 性別 -->
   <el-form-item label="性別" prop="sex">
    <el-radio-group v-model="personForm.sex">
     <el-radio label="0">男</el-radio>
     <el-radio label="1">女</el-radio>
    </el-radio-group>
   </el-form-item>
  </el-form>
 </div>
</template>

<script>
import {validateName, validateAge, validateSex } from '@/lib/validator.js';

// PersonForm的類
class PersonForm {
 constructor() {
  this.name = '';
  this.age = null;
  this.sex = null;
 }

 static getRule() {
  return {
   name: [{ validator: validateName, trigger: 'blur' }],
   age: [{ validator: validateAge, trigger: 'blur' }],
   sex: [{validator: validateSex, trigger: 'blur'}],
  }
 }
}

export default {
 data() {
  return {
   personForm: new PersonForm(),
   personFormRules: PersonForm.getRule()
  }
 }
}
</script>

<style>
 .person-form {
  width: 400px;
  height: 350px;
  padding: 20px;
  border: 1px solid #ccc;
 }
</style>

AdsForm.vue文件

下面的代碼是AdsForm.vue組件，該表單包括廣告名和廣告位置。我們使用了AdsForm這個類去實例化組件中的adsForm的值。在AdsForm中有個static方法getRule去獲取校驗方法去獲取校驗對象。

<template>
 <div class="ads-form">
   <h3>AdsForm.vue</h3>
   <el-form :model="adsForm" ref="adsForm" :rules="adsFormRules">
   <!-- 廣告名 -->
   <el-form-item label="廣告名" prop="name">
    <el-input v-model="adsForm.name"></el-input>
   </el-form-item>
   <!-- 廣告位置 -->
   <el-form-item label="廣告位置" prop="position">
    <el-select v-model="adsForm.position">
     <el-option value="1" label="左上"></el-option>
     <el-option value="2" label="右上"></el-option>
     <el-option value="3" label="左下"></el-option>
     <el-option value="4" label="右下"></el-option>
    </el-select>
   </el-form-item>
  </el-form>
 </div>
</template>

<script>
import { notEmpty, validateName } from '@/lib/validator.js';

class AdsForm {
 constructor() {
  this.name = '';
  this.position = null;
 }

 static getRule() {
  return {
   name: [{ validator: validateName, trigger: 'blur' }],
   position: [{ validator: notEmpty, trigger: 'blur' }],
  }
 }
}

export default {
 data() {
  return {
   adsForm: new AdsForm(),
   adsFormRules: AdsForm.getRule()
  }
 }
}
</script>

<style>
 .ads-form {
  width: 400px;
  height: 350px;
  padding: 20px;
  border: 1px solid #ccc;
  margin-left: 30px;
 }
</style>

validator.js文件

在PersonForm.vue 和 AdsForm.vue中我們導入了validator.js中的校驗方法，這些校驗方法中封裝了對表單屬性值的校驗規(guī)則。該文件中的方法在實際項目中，應(yīng)該使用策略模式再封裝一下。Demo中只有4個方法，就沒有再封裝來干擾讀者理解代碼。

// 驗證名字
var validateName = (rule, value, callback) => {
 if(!value) {
  callback(new Error('名字不能為空'));
 } else if(/[a-zA-Z]/.test(value)) {
  callback(new Error('請?zhí)顚懼形拿郑?));
 } else {
  callback();
 }
};

// 驗證年齡
var validateAge = (rule, value, callback) => {
 const toNumberVal = Number(value);
 if ((typeof value === 'string' && value === '') || (value === null)) {
  callback(new Error('年齡不允許為空'));
 } else if (isNaN(toNumberVal)) {
  callback(new Error('年齡為數(shù)值類型'));
 } else if(!(toNumberVal > 0 && toNumberVal <= 120)) {
  callback(new Error('年齡范圍應(yīng)該大于一歲且小于等于120歲'));
 } else {
  callback();
 }
}

// 驗證性別
var validateSex = (rule, value, callback) => {
 if (value === null) {
  callback(new Error('性別不允許為空'));
 } {
  callback();
 }
}

// 驗證不為空
var notEmpty = (rule, value, callback) => {
 if (value === '' || value === null || value === undefined) {
  callback(new Error('不允許為空'));
 } else {
  callback();
 }
}

export { 
  validateName, 
  validateAge, 
  validateSex,
  notEmpty,
}

App.vue

App.vue是父組件，當點擊【提交】按鈕時，應(yīng)該調(diào)用其ElmentUI的this.$refs[formName].validate方法去驗證各個子組件中的表單。但是需要注意的是，該方法是一個異步方法。

所以這里封裝了一個getFormPromise去生成Promise對象，并使用Promise.all去并行調(diào)用返回最終的校驗結(jié)果數(shù)組。

<template>
 <div class="app">
  <h2>App.vue</h2>

  <div class="forms-container">
   <!-- PersonForm.vue -->
   <person-form ref="personFormComp"/>
   <!-- AdsForm.vue -->
   <ads-form ref="adsFormComp"/>
  </div>

  <el-button 
   class="submit-btn" 
   @click="submitForm"
   type="primary">
   提交
  </el-button>
 </div>
</template>


<script>
import PersonForm from '@/components/PersonForm';
import AdsForm from '@/components/AdsForm.vue';

export default {
 components: {
  'person-form': PersonForm,
  'ads-form': AdsForm,
 },
 methods: {
  submitForm() {
   // 獲取到組件中的form
   const personForm = this.$refs.personFormComp.$refs.personForm;
   const adsForm = this.$refs.adsFormComp.$refs.adsForm;
   // 使用Promise.all去校驗結(jié)果
   Promise.all([personForm, adsForm].map(this.getFormPromise)).then(res => {
    const validateResult = res.every(item => !!item);
    if (validateResult) {
     console.log('兩個表單都校驗通過');
    } else {
     console.log('兩個表單未校驗通過');
    }
   })
  },
  getFormPromise(form) {
   return new Promise(resolve => {
    form.validate(res => {
     resolve(res);
    })
   })
  }
 }
}
</script>

<style>
.app {
 border: 1px solid #ccc;
 padding: 20px;
 width: 900px;
}
.app .submit-btn {
 margin-top: 40px;
}
.forms-container {
 display: flex;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手