ElementUI表单自动验证，获取不到表单值的解决办法

最新推荐文章于 2024-06-27 20:46:25 发布

北巷_东坡

最新推荐文章于 2024-06-27 20:46:25 发布

阅读量2.6k

点赞数 1

分类专栏：前端开发问题解决文章标签： elementui vue.js 前端 java

本文链接：https://blog.csdn.net/xiang_jiuxing/article/details/127729943

版权

本文介绍了在vue+elementui环境中遇到的表单自动验证失效及axios获取表单数据为空的解决方案。首先，针对前端验证失效问题进行了回顾，然后展示了登录页面的表单结构。在提交表单时，通过qs库处理数据，发现ruleForm.value无法获取到正确值。为了解决这个问题，创建了一个新的方法来获取表单值，从而成功解决了表单数据获取不到的问题。

摘要由CSDN通过智能技术生成

接上一边文章使用vue+elementui进行自动验证，验证失效问题的解决。

解决前端的自动验证失效问题后，就是使用axios进行数据传输。传输至后端接收数据。

一般场景都是登录页面，那咱们也同样用登录页来展示axios获取不到表单数据问题。

首先我们的vue页面如图所示

 <el-form ref="ruleFormref" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="0" style="margin: 0 auto;width: 400px" >
                      <div style="width: 330px;margin:0 auto">
                        <el-form-item  prop="identy" style="width: 100%;">
                          <el-radio-group v-model="ruleForm.identy" style="float: left">
                            <el-radio border label="教师" style=