element中表单验证规则(element多个表单校验的实现)
类别:编程学习 浏览量:1856
时间:2022-01-22 01:01:03 element中表单验证规则
element多个表单校验的实现在项目中,经常会遇到表单检验,单个表单检验可查看element的官网文档,里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法,欢迎大家留言,一起探讨相关技术,请多多指教。
这里主要用到 Promise 来解决。
关于Promise方法举个例子来抽象理解:
周末想吃火锅,打电话告诉小A,过来我这打火锅,菜都齐了,就差点海鲜,你来的时候带点。接着打电话找朋友小B,过来我这打火锅,有海鲜,肉少了点,你来的时候带点。在接着打电话找朋友小C:过来我这打火锅,啥菜都有了,差点酒,你来的时候整几瓶。还差一包火锅底料,拿手机打电话,小D啊,来打活个,咋几个都在,我这电炉不太行了,啥都准备好了,你把电炉带过来,顺便带包底料。
吃火锅这个事就成了,美滋滋。
但这个事吧。总不会一直顺利,总有人来不了对吧,来不了这火锅就吃不成了。
其实多个表单验证,就和这差不多,每个表单都询问一遍,如果大家都通过了,美滋滋,假如其中一个验证失败,那对不起,还得告诉用户,填对了再说。
通过Promise,对每个表单执行询问检测,无论结果如果,先进入Promise.all中,等待所有表单询问完毕,如果大家就可以,就触发then,美滋滋。反之,catch中执行失败响应就ok了。
const formName = ['tableForm1', 'tableForm2', 'tableForm3'] const validates = (item) => { return new Promise((resolve, reject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { if (valid) { resolve() } else { reject(new Error('验证不对')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失败') }) } }
最后,在这里贴上完整代码:
<li class="home"> <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" > <el-form-item label="价格" prop="price"> <el-input v-model.number="tableForm1.price" autocomplete="off"></el-input> </el-form-item> </el-form> <el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" > <el-form-item label="年龄" prop="age"> <el-input v-model.number="tableForm2.age" autocomplete="off"></el-input> </el-form-item> </el-form> <el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" > <el-form-item label="姓名" prop="name"> <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input> </el-form-item> </el-form> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </li> </template> <script> export default { name: 'Home', data () { return { tableForm1: { price: '' }, tableForm2: { age: '' }, tableForm3: { name: '' }, rules1: { price: [{ required: true, message: '价格不能为空', trigger: 'blur' }] }, rules2: { age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }] }, rules3: { name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }] } } }, methods: { resetForm () { this.$refs.tableForm1.resetFields() this.$refs.tableForm2.resetFields() this.$refs.tableForm3.resetFields() }, submitForm () { const formName = ['tableForm1', 'tableForm2', 'tableForm3'] const validates = (item) => { return new Promise((resolve, reject) => { if (!this.$refs[item]) { resolve() return false } this.$refs[item].validate((valid) => { if (valid) { resolve() } else { reject(new Error('验证不对')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失败') }) } } } </script>
到此这篇关于element多个表单校验的实现的文章就介绍到这了,更多相关element 表单校验内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- element中表单验证规则(element多个表单校验的实现)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- element加固态(Element Plus实现Affix 固钉)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
热门推荐
- rabbitmq客户端内存占用(mysql-canal-rabbitmq 安装部署超详细教程)
- nginx最新配置(配置nginx 重定向到系统维护页面)
- 弹性云主机的组成(什么叫弹性云服务器?弹性云主机的“弹性”反映在哪?)
- python如何解压加密zip文件(python读取有密码的zip压缩文件实例)
- python迭代函数(详解Python中的内建函数,可迭代对象,迭代器)
- python选择语句形式判断回文数(Python3实现的回文数判断及罗马数字转整数算法示例)
- web服务器iis安全访问机制(IIS与APACHE实现HTTP重定向到HTTPS)
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- linux安装nginx启动页面访问不到(apache,nginx上传目录无执行权限的设置方法)
- nodejsweb服务(Nodejs实现内网穿透服务)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9