精华内容
下载资源
问答
  • vue表单提交异步
    2021-08-06 10:11:57

    1 在组件中

    <template>
        <div>
           <form ref="form1" @click.prevent="fn_submit()" action="data/sun.php" method="post">
                <input type="text" value="a" name="a"/>
                <input type="text" value="b" name="b"/>
                <input type="button" value="计算"/>
           </form> 
        </div>
    </template>

    在methods中:

    methods:{
        async fn_submit(){
            let form = this.$refs(form1)
            let formdata = new FormData(form );
            let res = await fetch(form.action,{//为什么写两个await?第一个是用来请求
                method:form.method,
                body:formdata
            });
            let result = await res.json();//为什么写两个await?第二个是用来解析,解析也涉及异步
            this.age = result;
        }
    }

    更多相关内容
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • Vue表单验证和异步

    2021-07-27 20:09:05
    1.表单校验的必要条件 v-model只能绑定input数据 v-model还可以实现父子通信(父组件使用v-model,子组件props里面默认用value接收,使用$emit向父组件发送事件,默认是input 这样子组件就可以通过父组件更改数据 :...

    1.表单校验的必要条件

    v-model只能绑定input数据
    v-model还可以实现父子通信(父组件使用v-model,子组件props里面默认用value接收,使用$emit向父组件发送事件,默认是input 这样子组件就可以通过父组件更改数据
    在这里插入图片描述
    :model绑定from表单数据

     <el-form style="margin-top:40px" :model="loginForm" >
    

    rules规则 先定义空规则,后续再详解

    loginRules: {}
    <el-form style="margin-top: 50px" model="loginForm" :rules="loginRules">
    

    设置prop属性

    校验谁写谁的字段

    <el-form-item prop="mobile">
       ...
    <el-form-item prop="password">
       ...
    

    给input绑定字段属性

    <el-input v-model="loginForm.mobile"></el-input>
    <el-input v-model="loginForm.password"></el-input>
    

    表单校验规则

    此时,先决条件已经完成,要完成表单的校验,需要编写规则

    ElementUI的表单校验规则来自第三方校验规则参见 async-validator

    我们介绍几个基本使用的规则

    规则说明
    required如果为true,表示该字段为必填
    message当不满足设置的规则时的提示信息
    pattern正则表达式,通过正则验证值
    min当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
    max当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
    trigger校验的触发方式,change(值改变) / blur (失去焦点)两种,
    validator如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验

    自定义校验规则

    自定义校验规则怎么用

    validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

    var  func = function (rule, value, callback) {
        // 根据value进行进行校验 
        // 如果一切ok  
        // 直接执行callback
        callback() // 一切ok 请继续
        // 如果不ok 
        callback(new Error("错误信息"))
    }
    

    根据以上要求,增加手机号第三位必须是9的校验规则

    如下

    // 自定义校验函数
        const checkMobile = function (rule, value, callback) {
          value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
        }
    
     mobile: [
              { required: true, message: '手机号不能为空', trigger: 'blur' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
                trigger: 'blur',
                validator: checkMobile
       }],
    

    手动校验的实现

    最后一个问题,如果我们直接点登陆按钮,没有离开焦点,那该怎么校验 ?

    此时我们需要用到手动完整校验 案例

    form表单提供了一份API方法,我们可以对表单进行完整和部分校验

    方法名说明参数
    validate对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promiseFunction(callback: Function(boolean, object))
    validateField对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: string))
    resetFields对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
    clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果Function(props: array | string)

    这些方法是el-form的API,需要获取el-form的实例,才可以调用

    采用ref进行调用

    <el-form ref="loginForm" style="margin-top:40px" :model="loginForm" :rules="loginRules">
    
    

    调用校验方法

      login () {
          // 获取el-form的实例
          this.$refs.loginForm.validate(function (isOK) {
            if (isOK) {
              // 说明校验通过
              // 调用登录接口
            }
          }) // 校验整个表单
        }
    

    Async 和 Await

    针对异步编程,我们学习过Ajax的回调形式,promise的链式调用形式

    ajax回调模式

    // 回调形式调用
    $.ajax({
        url,
        data,
        success:function(result){
            $.ajax({
                data:result,
                success: function(result1){
                    $.ajax({
                        url,
                        data: result1
                  })
                }
            })
        }
    })
    

    promise的链式回调函数

    // 链式调用 没有嵌套
    axios({ url, data}).then(result => {
        return  axios({ data:result }) 
    }).then(result1 => {
         return  axios({ data:result1 }) 
    }).then(result2 => {
       return axios({ data: result2 }) 
    }).then(result3 => {
        return axios({ data: result3 }) 
    })
    

    关于Promise你必须知道几件事

    关于Promise你必须知道几件事

    如何声明一个Promise

    new Promise(function(resolve, reject){ })
    

    如果想让Promise成功执行下去,需要执行resolve,如果让它失败执行下去,需要执行reject

    new Promise(function(resolve, reject) { 
        resolve('success')  // 成功执行
    }).then(result => {
        alert(result)
    })
    
    new Promise(function(resolve, reject) { 
        reject('fail')  // 成功执行
    }).then(result => {
        alert(result)
    }).catch(error => {
         alert(error)
    })
    

    如果想终止在某个执行链的位置,可以用Promise.reject(new Error())

    new Promise(function(resolve, reject) {
        resolve(1)
    }).then(result => {
        return result + 1
    }).then(result => {
        return result + 1
    }).then(result => {
      return  Promise.reject(new Error(result + '失败'))
       // return result + 1
    }).then(result => {
        return result + 1
    }).catch(error => {	
        alert(error)
    })
    

    异步编程的终极方案 async /await

    async 和 await实际上就是让我们像写同步代码那样去完成异步操作

    await 表示强制等待的意思,await关键字的后面要跟一个promise对象,它总是等到该promise对象resolve成功之后执行,并且会返回resolve的结果

     async test () {
          // await总是会等到 后面的promise执行完resolve
          // async /await就是让我们 用同步的方法去写异步
          const result = await new Promise(function (resolve, reject) {
            setTimeout(function () {
              resolve(5)
            }, 5000)
          })
          alert(result)
        }
    

    上面代码会等待5秒之后,弹出5

    async 和 await必须成对出现

    由于await的强制等待,所以必须要求使用await的函数必须使用async标记, async表示该函数就是一个异步函数,不会阻塞其他执行逻辑的执行

    async test () {
          const result = await new Promise(function(resolve){  
             setTimeout(function(){
                 resolve(5)
             },5000)
           })
           alert(result)
        },
        test1(){
          this.test()
          alert(1)
        }
    

    通过上面的代码我们会发现,异步代码总是最后执行,标记了async的函数并不会阻塞整个的执行往下走

    如果你想让1在5弹出之后再弹出,我们可以这样改造

       async test1(){
         await this.test()
          alert(1)
       }
    // 这充分说明 被async标记的函数返回的实际上也是promise对象
    

    如果promise异常了怎么处理?

    promise可以通过catch捕获,async/ await捕获异常要通过 try/catch

       async  getCatch () {
          try {
            await new Promise(function (resolve, reject) {
              reject(new Error('fail'))
            })
            alert(123)
          } catch (error) {
            alert(error)
          }
       }
    

    async / await 用同步的方式 去写异步

    展开全文
  • 这里就是在提交表单的时候进行预验证,在表单 el-form 中添加属性ref=“addFormRef”,然后利用 this.$refs.addFormRef.validate,如果通过了预验证,则valid为true就可以进行发送请求的操作 async submitForm(form...
    我们在写表单的时候,如果表单输入的数据不符合验证要求,
    那么就应该阻止其发送请求,这里就需要进行表单预验证
    

    这里就是在提交表单的时候进行预验证,在表单 el-form 中添加属性ref=“addFormRef”,然后利用 this.$refs.addFormRef.validate,如果通过了预验证,则valid为true就可以进行发送请求的操作

    async submitForm(formName) {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          this.getCurrentTime()
          const { data: res } = await addcodeApi(this.formData)
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.getcodeList()
            this.resetForm(formName)
            this.addDialogVisible = false
          } else {
            this.$message.error('添加失败')
          }
        }
      })
    }
    

    我这里使用异步操作进行表单预验证,然后就报错如下:

    在这里插入图片描述
    这是因为async 和 await 必须成对存在,经过修改如下:

    submitForm(formName) {
      this.$refs.addFormRef.validate(async(valid) => {
        if (valid) {
          this.getCurrentTime()
          const { data: res } = await addcodeApi(this.formData)
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.getcodeList()
            this.resetForm(formName)
            this.addDialogVisible = false
          } else {
            this.$message.error('添加失败')
          }
        }
      })
    }
    

    这样就能在发送请求前进行表单预验证啦

    在这里插入图片描述

    展开全文
  • 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半...
  • Vue 3的表单验证 用于表单验证的Vue合成功能。 :milky_way: 用TypeScript编写 :water_wave: 动态表格支持 :fallen_leaf: 轻的 npm install vue3-form-validation 验证是异步的,并且正在使用Promise.allSettled...
  • Vue 使用form表单提交问题

    千次阅读 2021-12-10 16:04:00
    背景:公司的项目对接了一家第三方的支付机构,使用云闪付web移动端支付,对方要求form表单提交信息 1、一开始,使用接口使用Axios请求设置form格式提交 import axios from "axios"; axios.post( success.data...

    背景:公司的项目对接了一家第三方的支付机构,使用云闪付web移动端支付,对方要求form表单提交信息

    1、一开始,使用接口使用Axios请求设置form格式提交

    import axios from "axios";  
    
    axios.post(
                      success.data.credential.postParamMap,
                      JSON.parse(success.data.credential.postParamMap),
                      {headers: {'Content-Type':'application/x-www-form-urlencoded'}}
                    )
                    .then((req) => {
                      console.log(req);
                      // window.location.href = req.url
                    },
                    (fail) => {
                      that.$toast("支付异常,请选择其他支付方式");
                    });
    
    
    // 接口跨域请求代理
    proxyTable: {
          "/v1.1/user_actions/add": {
            target: "https://api.e.qq.com",
            secure: true,
            changeOrigin: true
          },
          "/gateway/api/frontTransReq.do": {
            target: "https://gateway.95516.com",
            secure: true,
            changeOrigin: true
          },
        },

    结果行不通,不知道什么原因,后面对方发了一份案列过来

    <html>
    <head>
        <title>To YeePay Page</title>
    </head>
    <body onload="document.yeepay.submit();">
    <form name='yeepay' action='https://gateway.95516.com/gateway/api/frontTransReq.do' method='post'>
        <input type='hidden' name='bizType'     value='xxx'>
        <input type='hidden' name='backUrl'     value='xxx'>
        <input type='hidden' name='txnSubType'    value='xxx'>
        <input type='hidden' name='orderId'     value='xxx'>
        <input type='hidden' name='signature'    value='xxx'>
    </form>
    </body>
    </html>

    瞬间懵逼,机智的我参照这个,使用vue做了类似的,但是还是遇到了兼容问题,那就是在移动端真机验证的时候,苹果手机下死活不行,问题和解决思路

    1、将案例运行到服务器,使用苹果手机打开,可行,说明案例可行,案例代码没问题,是自己的问题

    2、试着将案例的数据在自己的页面全部赋值写死,运行发现可行,说明vue环境下可行,是自己代码有问题

    3、开始动态赋值,结果发现自己的参数在data中没有定义,这是坑1

    4、input框v-model和value不能同时存在,这是坑2

    5、一开始使用的cookie存取,最后发现是这个一直不行,原本还以为是cookie存取是异步,数据上有延迟,设置了setTimeout异步处理还是不行

    6、最终,使用sessionStorage存取就行了,坑爹的玩意。

    <template>
      <div class="container">
        <form name='yeepay' :action='redirectUrl' method='post'>
          <input type='hidden' name='bizType' v-model='bizType'>
          <input type='hidden' name='backUrl' v-model='backUrl'>
          <input type='hidden' name='txnSubType' v-model='txnSubType'>
          <input type='hidden' name='orderId' v-model='orderId'>
          <input type='hidden' name='signature' v-model='signature'>
          <input type='hidden' name='merName' v-model='merName'>
          <input type='hidden' name='txnType' v-model='txnType'>
          <input type='hidden' name='channelType' v-model='channelType'>
          <input type='hidden' name='frontUrl' v-model='frontUrl'>
          <input type='hidden' name='certId' v-model='certId'>
          <input type='hidden' name='encoding' v-model='encoding'>
          <input type='hidden' name='acqInsCode' v-model='acqInsCode'>
          <input type='hidden' name='version' v-model='version'>
          <input type='hidden' name='merAbbr' v-model='merAbbr'>
          <input type='hidden' name='orderTimeout' v-model='orderTimeout'>
          <input type='hidden' name='accessType' v-model='accessType'>
          <input type='hidden' name='txnTime' v-model='txnTime'>
          <input type='hidden' name='merId' v-model='merId'>
          <input type='hidden' name='merCatCode' v-model='merCatCode'>
          <input type='hidden' name='currencyCode' v-model='currencyCode'>
          <input type='hidden' name='txnAmt' v-model='txnAmt'>
          <input type='hidden' name='signMethod' v-model='signMethod'>
          <input type='hidden' name='orderDesc' v-model='orderDesc'>
        </form>
      </div>
    </template>
    
    <script>
    export default {
      name: "UnionH5Pay",
      components: {
      },
      data () {
        return {
          redirectUrl: '',
          bizType: '',
          backUrl: '',
          txnSubType: '',
          orderId: '',
          signature: '',
          merName: '',
          txnType: '',
          channelType: '',
          frontUrl: '',
          certId: '',
          encoding: '',
          acqInsCode: '',
          version: '',
          merAbbr: '',
          orderTimeout: '',
          accessType: '',
          txnTime: '',
          merId: '',
          merCatCode: '',
          currencyCode: '',
          txnAmt: '',
          signMethod: '',
          orderDesc: '',
        };
      },
      created () {
        this.$indicator.open();
        document.title = "收银台";
        this.redirectUrl = sessionStorage.getItem("union_post_url");
        let union_post_param_map = sessionStorage.getItem("union_post_param_map");
        let queryAppObj = JSON.parse(union_post_param_map)
        this.bizType = queryAppObj.bizType ? queryAppObj.bizType : '';
        this.backUrl = queryAppObj.backUrl ? queryAppObj.backUrl : '';
        this.txnSubType = queryAppObj.txnSubType ? queryAppObj.txnSubType : '';
        this.orderId = queryAppObj.orderId ? queryAppObj.orderId : '';
        this.signature = queryAppObj.signature ? queryAppObj.signature : '';
        this.merName = queryAppObj.merName ? queryAppObj.merName : '';
        this.txnType = queryAppObj.txnType ? queryAppObj.txnType : '';
        this.channelType = queryAppObj.channelType ? queryAppObj.channelType : '';
        this.frontUrl = queryAppObj.frontUrl ? queryAppObj.frontUrl : '';
        this.certId = queryAppObj.certId ? queryAppObj.certId : '';
        this.encoding = queryAppObj.encoding ? queryAppObj.encoding : '';
        this.acqInsCode = queryAppObj.acqInsCode ? queryAppObj.acqInsCode : '';
        this.version = queryAppObj.version ? queryAppObj.version : '';
        this.merAbbr = queryAppObj.merAbbr ? queryAppObj.merAbbr : '';
        this.orderTimeout = queryAppObj.orderTimeout ? queryAppObj.orderTimeout : '';
        this.accessType = queryAppObj.accessType ? queryAppObj.accessType : '';
        this.txnTime = queryAppObj.txnTime ? queryAppObj.txnTime : '';
        this.merId = queryAppObj.merId ? queryAppObj.merId : '';
        this.merCatCode = queryAppObj.merCatCode ? queryAppObj.merCatCode : '';
        this.currencyCode = queryAppObj.currencyCode ? queryAppObj.currencyCode : '';
        this.txnAmt = queryAppObj.txnAmt ? queryAppObj.txnAmt : '';
        this.signMethod = queryAppObj.signMethod ? queryAppObj.signMethod : '';
        this.orderDesc = queryAppObj.orderDesc ? queryAppObj.orderDesc : '';
      },
      mounted() {
        let that = this;
        this.$nextTick(() =>{
          setTimeout(()=>{
            that.$indicator.close();
          }, 300)
          document.yeepay.submit();
        });
      },
      methods: {
      },
    };
    </script>
    
    <style lang="less" scoped>
    </style>

    展开全文
  • Vue表单实例代码

    2021-01-19 15:15:38
    什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库。...快速: 精确有效的异步批量 DOM 更新。 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。 gitHub地址:https://github.com/lily10
  • 请输入用户名"> 请输入年龄"> <input type="file" name="uploadFile"> 提交"> form> body> html> 在vue中这种简单的表单提交其实使用的是 FormData 来模拟表单提交 <head> <title>title> <meta charset="UTF-8"> , ...
  • Vue中进行异步请求

    万次阅读 2018-09-06 17:49:50
    前端的数据均是通过接口请求拿到的,而Vue本身不支持ajax请求,那么该怎么解决Vue中的异步请求呢?这儿提供了几种方法,希望对大家有所帮组。 一、axios实现异步请求 1.项目中安装axiox npm install –...
  • vue 解决form表单提交但不跳转页面的问题vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转:sub函数写在methods内:methods:{$.post('http://api.test.ai/visitorinfo/', $('#msgForm').serialize...
  • vue 处理异步请求

    千次阅读 2021-01-29 15:20:56
    Vue处理异步请求一、使用promise处理异步二、使用async-await处理 一、使用promise处理异步 首先可以先了解一下ES6-promise的具体使用方法。 执行步骤: 1,实例化Promise(new Promise(function(resolve,reject)...
  • Vue 用法及部分Element-UI 标签及属性的使用 1.1 <template 标签 <!-- 该标签可以理解为页面布局,display默认为none,存放dom树下的元素--> <template> <div>... <div>.. <el-form&...
  • 92行报错因为异步加载动态组件,需要解析文件路径,在vue打包中,会把 @/ 这种路径转为相对路径,但是动态组件的话,是打包后,生产环境中是无法解析 @/ 这种语法路径,所以会报错。 解决: 把需要异步加载的组件按...
  • leo-vue-validator一个基于vue2异步表单验证组件
  • 表单提交的方式总结(后端使用springmvc) 准备工作 1.实体类 package com.ckf.springbootswagger.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId...
  • {name:'vue-resource'}, {emulateJSON:true} // 设置使用表单格式提交 ).then((response) => { console.log(response.data) }) Vue.http.get( 'http://192.168.137.1/public/index.php/ezdeploy/api/test2', {...
  • 异步请求服务的校验(重名校验),还有延迟校验。如何引入等就不在这里赘述了,直接进入主题。 1.必填和长度校验 直接采用v-validate属性进行配置,不同的校验采用 ‘|’ 隔开。是否有报错根据 errors.has(...
  • vue异步更新过程

    2021-12-07 17:19:35
    vue异步更新实现过程 dep.notify()=>update()=> queueWatcher()=>nextTick()=>timerFunc(fn)=>flushCallbacks()=>flushSchedulerQueue()=>watcher.run()=>cb|render() 1.数据发生变化时,...
  • vue动态表单第二次打开没点提交就开始校验了新项目基于vue加ruoyi做动态表单踩坑 新项目基于vue加ruoyi做动态表单踩坑 1 . 动态渲染的组件在el-dialog里面抱着用true或false去控制是否弹出, 在正常组件表单写法,...
  • 表单提交 一、Axios Axios 是一个基于 promise 的易用、简洁且高效的http库。 特性 支持node端和浏览器端:同样的API,node和浏览器全支持,平台切换无压力 支持Promise:使用Promise管理异步,告别传统callback...
  • vue 表单验证由异步变更为同步

    千次阅读 2020-07-08 17:22:00
    写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法 实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则...
  • Axios异步通信 文章目录Axios异步通信什么是Axios为什么要使用Axios第一个Axios应用程序 什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点...
  • 今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错。因此我希望能在所有请求都得到后再去做页面的渲染。1.先把...
  • AntDesign 表单异步校验

    千次阅读 2022-02-22 21:42:29
    AntDesign 表单异步校验

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,001
精华内容 5,600
关键字:

vue表单提交异步