vue element 如何把校验之后的表单数据通过ajax传给后台_qq_37591637的博客-CSDN博客_elemetnt表单数据ajax严重后点确认
vue element 如何把校验之后的表单数据通过ajax传给后台
qq_37591637
于 2019-05-10 11:57:33 发布
6889
收藏
分类专栏：
vue前端专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/90054609
版权
vue前端专栏
专栏收录该内容
52 篇文章
7 订阅
订阅专栏
我的qq 2038373094
前提
axios 能够让vue前端和你的服务器后台可以连接上，前后台可以传输静态的数据
vue实战——vue中发送AJAX请求 https://blog.csdn.net/qq_37591637/article/details/90047745
表单的html代码
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model.number="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
页面效果如下
js代码如下
<script>
import Head from '../../components/common/Head'
import axios from 'axios'
import Qs from 'qs'
export default {
components:{
Head
},
data() {
var checkUser = (rule, value, callback) => {
if (!value) {
return callback(new Error('用户名不能为空'));
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
callback();
// if (value != 11) {
// callback(new Error('手机格式不正确'));
// } else {
// callback();
// }
}, 1000);
};
var vapass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
callback();
};
var varepass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
};
return {
ruleForm: {
password: '',
checkPass: '',
username: ''
},
rls: {
password: [
{ validator: vapass, trigger: 'blur' }
],
checkPass: [
{ validator: varepass, trigger: 'blur' }
],
username: [
{ validator: checkUser, trigger: 'blur' }
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
/*在这里进行跨域请求*/
this.axios({
method: "post",
url: '/api/PsychoSys/regedit.action',
data: Qs.stringify(this.ruleForm)
})
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log(err);
});
/*在这里进行跨域请求*/
} else {
console.log('error submit!!');
return false;
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
</script>
图解关系
注意
qq_37591637
关注
关注
点赞
收藏
打赏
评论
vue element 如何把校验之后的表单数据通过ajax传给后台
我的qq 2038373094前提axios 能够让vue前端和你的服务器后台可以连接上，前后台可以传输静态的数据vue实战——vue中发送AJAX请求 https://blog.csdn.net/qq_37591637/article/details/90047745表单的html代码 <el-form :model="ruleForm" status-...
复制链接
扫一扫
专栏目录
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
10-17
主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-element-admin提交表单数据到后端
祈澈菇凉
09-16
6146
前几天使用vue-element-admin框架开发了一个简单的后台管理系统，在开发的过程之中也遇到了一些功能，以及对饿了么框架的使用遇到的一些问题，如何解决问题，记录一下。
资料相关
vue-element-admin
推荐指数：star:55k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://p...
参与评论
您还未登录，请先
登录
后发表或查看评论
若依 springboot vue 将前端整个表单信息传到后端处理
最新发布
weixin_43937851的博客
10-26
429
若依 springboot vue 将前端整个表单信息传到后端处理
vuerules如何引入Ajax判断,基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
weixin_36036925的博客
08-06
291
前言开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的在线访问:动态表单校验github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题1.整个表单是可新增的，所以要遍历生成；2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则)实现1.elem...
vue传递参数到后台_vue.js前后端数据交互之提交数据操作详解
weixin_39996141的博客
12-19
6587
本文实例讲述了vue.js前后端数据交互之提交数据操作。分享给大家供大家参考，具体如下：前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用ajax就能实现，但他的原始语法有点。。。额 。。。复杂，所以这里给大家提供一种用vue-resource向后端提交数据。(1)第一步，先在template中写一个表单；提交(2)在data里面定义表单内容的字段...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
weixin_32965939的博客
08-05
1429
vue使用ajax请求后台数据的方法发布时间：2020-10-15 16:54:41来源：亿速云阅读：108作者：栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。vue本身它是不支持直接发送ajax请求的，需要用到axios(一个基于promise的HTTP库，可以用在浏览器和node.js中)第一步：Axios的安装和引...
vue对整体表单数据预校验并提交到后台实现增加用户
m0_51459514的博客
03-31
947
1.为确认提交按钮添加点击事件
<el-button type="primary" @click="addUser">确 定</el-button>
2.编辑事件
//点击按钮，添加用户
addUser(){
// 进行表单的预校验,vaild为boolean值
this.$refs.addFormRef.validate( async valid =>{
// 校验失败，不走添加的逻辑
if (!valid) return;
//校验成...
vue+elementUI 复杂表单的验证、数据提交方案
qq_42740100的博客
08-30
389
vue + elementUI复杂表单的验证数据提交的方案
vue详细用法,ajax异步请求,案例分析 Element-ui组件使用,表单提交更新,下载,超详细
weixin_56309075的博客
08-27
807
Vue 用法及部分Element-UI
标签及属性的使用
1.1 <template 标签
<!-- 该标签可以理解为页面布局,display默认为none,存放dom树下的元素-->
<template>
<div>...
<div>..
<el-form>
<el-row>
<el-col>
</
element ajax,vue+element-ui+ajax实现一个表格的实例
weixin_39695241的博客
08-05
228
实例如下：姓名: {{ scope.row.name }}{{ scope.row.name }}{{ scope.row.take }}{{ scope.row.startTime }}{{ scope.row.finishTime }}编辑删除new Vue({el:'#app',data:{tableData: [],getUrl: 'http://localhost:8080/mytime...
element table表格实现编辑并后台提交数据
s990420的博客
08-09
903
element table表格实现编辑并后台提交数据
Vue使用ajax(axios)请求后台数据
热门推荐
豪先生的博客
03-17
1万+
前言：页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。
vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：使用说明 · Axios 中文说明 · 看云
Axios安装
前台部分
1、npm安装
npm i axios -S //......
element获取到后台的数据(ajax)
qq_24664619的博客
11-16
8533
一.后台代码
List list = uBiz.getAll();
JSONArray json = new JSONArray();
json = json.fromObject(list);
response.getWriter().println(json);
二.前台代码
$.ajax({
url:"/Element/data",
dataType:"json",
vue-resource得到表格当前行的数据并向后台发送ajax请求（小白整理~）
duduyingya的博客
02-28
635
环境：springboot，vue，vue-resource（cdn方式）
引入相关文件:
<!-- 这里是本地引入css -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- 引入element-ui 要注意引入的顺序 线上引入~ -->
&...
vue表单信息提交（数据传到后台接口保存）
qq5678574的博客
12-07
9410
提交按钮
<md-button type="primary" @click="onSubmit" round>提交</md-button>
绑定的onSubmit事件
onSubmit(){
Dialog.confirm({
title: '确认',
content: '确认提交',
confirmText: '确定',
onConfirm: () => console.log('[Dialo
Vue实现表单提交给SpringBoot后台并存入Mysql数据库
qq_48959845的博客
08-08
1790
从早上7点过一直搞到现在，终于实现Vue实现表单提交给SpringBoot后台并存入Mysql数据库，因为之前没有接触Vue,就昨天看了他的官方文档
创建mysql的对应实体类
@Entity(name="bookInfo")
public class Books {
@Id
@GeneratedValue
private Long id;
private String bookName;
private String bookImgUrl;
priva
前端：form多个字段传递给后台，保存至数据库。（序列化form表单内容）
Jcsim~
09-09
705
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
<script>
let allData = {}
$.each($('form').serializeArray(), function () {
allData[this.name] = this.value;
});
console.log(allData);//全部表单字段，名值对形式：{name: valu.
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
weixin_30455023的博客
09-20
1180
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
基于element Transfer
http://element-cn.eleme.io/#/zh-CN/component/transfer
直接上代码
<template>
<div class="auth-user-list">
<el-breadcrumb separ...
通过jQuery中的ajaxSubmit()提交表单
qq_48739475的博客
11-01
355
1、为什么使用：通过ajaxSubmit()方式可以在不刷新页面的情况下异步提交表单
1、前提：除了引入必要的jquery.js外还要引入js/jquery.form.js
2、使用实例：
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></scri
Ajax提交form表单数据
敏敏的博
04-08
3515
文章目录前言一、form表单介绍1.什么是表单2.表单form的组成部分3.表单form的属性4.表单的同步提交二、Ajax 提交表单数据1.监听表单的提交事件2.阻止表单的默认提交行为3.快速获取表单中的数据4.通过Ajax请求提交表单数据给服务器总结
前言
本文介绍了表单的基本使用及属性说明,通过Ajax请求方式将网页表单数据提交到服务器的具体实现过程，代码实现在文章末尾。
一、form表单介绍
1.什么是表单
表单在网页中主要负责数据采集功能,采集用户输入信息提交到服务器端进行处理。常见登陆注册页
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：终极编程指南
设计师：CSDN官方博客
返回首页
qq_37591637
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
519
原创
5万+
周排名
84万+
总排名
604万+
访问
等级
3万+
积分
945
粉丝
1988
获赞
757
评论
6930
收藏
私信
关注
热门文章
SQL Server 2012 下载和安装详细教程
476906
Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
169634
Traceback (most recent call last): File “D:/python_workspace/hello.py“, line 3, in ＜module＞
134090
Uncaught SyntaxError: Invalid or unexpected token
109960
宝塔面板添加站点绑定域名，但是无法访问域名
68561
分类专栏
python
付费
6篇
flinksql
1篇
实践项目
1篇
Linux
1篇
程序软件安装配置
3篇
VMWARE
1篇
Docker
4篇
python编程专栏
30篇
hadoop
1篇
redis
2篇
springboot
java编程专栏
105篇
socket通讯专栏
28篇
趣味编程专栏
1篇
jsp网页学习专栏
74篇
电脑问题处理专栏
30篇
vb语言学习专栏
3篇
java之ssh框架专栏
68篇
搭建服务器
4篇
数据库专栏
32篇
微信小程序专栏
37篇
手机软件h5应用制作
43篇
vue前端专栏
52篇
人工智能之深度学习
21篇
java编程之ssm框架
1篇
最新评论
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbe in position 0: invalid start byte
爆爆1:
csv文件右键单击，打开方式为记事本，修改编码方式，另存为
FileExistsError: [WinError 183] 当文件已存在时,无法创建该文件。: 'D:/tjn/tra
angryice:
先listdir啊，如果存在就不要mkdir了
sqlserver 2012如何导出数据库
求求了让我学会编程吧:
在哪里可以看导出的具体位置呀
js 实现登录成功 首页显示用户名和退出登录
m0_56342178:
求码源
csdn博客怎么转载别人的文章
equinox__:
已学会 感谢
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
flinksql 如何引用 条件判断计算的结果？
傻瓜式用u盘安装ubuntu系统，并配置网络
centos通过源文件的方式安装node-red 避坑指南
2022年1篇
2021年11篇
2020年23篇
2019年358篇
2018年129篇
目录
目录
分类专栏
python
付费
6篇
flinksql
1篇
实践项目
1篇
Linux
1篇
程序软件安装配置
3篇
VMWARE
1篇
Docker
4篇
python编程专栏
30篇
hadoop
1篇
redis
2篇
springboot
java编程专栏
105篇
socket通讯专栏
28篇
趣味编程专栏
1篇
jsp网页学习专栏
74篇
电脑问题处理专栏
30篇
vb语言学习专栏
3篇
java之ssh框架专栏
68篇
搭建服务器
4篇
数据库专栏
32篇
微信小程序专栏
37篇
手机软件h5应用制作
43篇
vue前端专栏
52篇
人工智能之深度学习
21篇
java编程之ssm框架
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
qq_37591637
请给我持续更新的动力~~
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值