ElementUI多个子组件表单的校验管理实现
背景
公司项目中所用到的前端框架是Vue.js + ElementUI,因为项目的业务场景中有很多的大表单,但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便,常常把多个表单写在一个.vue组件中,这导致单文件的代码量巨大,逻辑十分复杂。目前为了维护方便,表单的拆分就变得十分重要。
现在做了以下的Demo说明我们的业务场景,父组件是App.vue,该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中,可能多达10+表单)。【提交】按钮在父组件App.vue中,当点击【提交】按钮后,应该分别校验各个子组件,如果每个子组件都校验成功后再进行提交。
Demo
PersonForm.vue文件
下面的代码是PersonForm.vue组件,该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。在PersonForm中有个static方法getRule去获取校验方法去获取校验对象,该校验对象是ElementUI要求的写法,会在<el-form>的rules中定义。
<template> <div class="person-form"> <h2>PersonForm.vue</h2> <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"> <h2>AdsForm.vue</h2> <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中的校验方法,这些校验方法中封装了对表单属性值的校验规则。该文件中的方法在实际项目中,应该使用策略模式再封装一下。Demo中只有4个方法,就没有再封装来干扰读者理解代码。
// 验证名字 var validateName = (rule, value, callback) => { if(!value) { callback(new Error('名字不能为空')); } else if(/[a-zA-Z]/.test(value)) { callback(new Error('请填写中文名字!')); } 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('年龄为数值类型')); } else if(!(toNumberVal > 0 && toNumberVal <= 120)) { callback(new Error('年龄范围应该大于一岁且小于等于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是父组件,当点击【提交】按钮时,应该调用其ElmentUI的this.$refs[formName].validate方法去验证各个子组件中的表单。但是需要注意的是,该方法是一个异步方法。
所以这里封装了一个getFormPromise去生成Promise对象,并使用Promise.all去并行调用返回最终的校验结果数组。
<template> <div class="app"> <h1>App.vue</h1> <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去校验结果 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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- Spring MVC代码实例系列-12:使用自带的validation实现自定义message表单校验
- 标准功能模块组件 -- 名片管理组件,C/S 版本的标准用例程序,可以参考权限实现方法
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- 【SSH进阶之路】一步步重构容器实现Spring框架——解决容器对组件的“侵入式”管理的两种方案--主动查找和控制反转(九)
- JavaScript:使用JavaScript 实现注册表单的校验
- ASP.NET基于表单的验证实现网上安全访问,管理(1)
- ASP.NET中启用Windows集成验证,怎样在调用System.DirectoryServices下的组件时传递安全上下文,也就是说当前用户凭据,来实现权限管理
- 开发指南专题九:JEECG微云快速开发平台-表单校验组件ValidForm
- Vue2.0+ElementUi封装table组件实现分页功能
- delphi 基于模型驱动的表单拓展组件的设计与实现。
- OWA管理之一HTTPS实现OWA表单
- 利用开源的TaskScheduler组件实现监控和管理windows计划任务
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现数据列的权限,附源码
- 表单校验功能的完整实现步骤
- express实现管理后台校验登录
- 基于Hibernate校验器组件实现Web开发中的校验逻辑
- 在Struts 2中使用DWR实现AJAX表单校验。
- Vue2 & ElementUI实现管理后台之input获得焦点
- 项目总结一:页面弹出框+表单输入与校验形式,实现添加内容到页面
- Extjs表单输入框异步校验的插件实现方法