精华内容
下载资源
问答
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • Vue form 表单提交+ajax异步请求+分页效果发布时间:2020-10-17 20:33:41来源:脚本之家阅读:67作者:liuyinhe110808废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context =...

    Vue form 表单提交+ajax异步请求+分页效果

    发布时间:2020-10-17 20:33:41

    来源:脚本之家

    阅读:67

    作者:liuyinhe110808

    废话不多说了,直接给大家贴代码了,具体代码如下所示:

    异步参数上传

    -->

    -->

    var $context = {};

    $context.ctx = '${ctx}';

    $context.resources = '${ctx}/resources';

    placeholder="请输入appkey">

    placeholder="请输入批次号">

    v-model.trim="batchInforRequestVO.currentPage">

    查询

    查询结果
    批次号处理进度文件名称上传时间请求方法操作
    {{batchInforResponseVO.batchNum}}{{batchInforResponseVO.processPercentage}}{{batchInforResponseVO.channelName}}{{batchInforResponseVO.inserTime}}{{batchInforResponseVO.requestAddre}}导出

    v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出

    每页10条记录 当前页{{batchInforRequestVO.currentPage}} &nbsp

    共{{totalPage}}页&nbsp←上一页&nbsp &nbsp

    id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →

    展开全文
  • 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 用同步的方式 去写异步

    展开全文
  • 写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法 实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则...

    写前端项目时vue表单验证突然变成异步了,导致如果获取校验函数的返回值,应该是升级iview组件导致的,这里记录一下改为同步的一种写法

    实现功能:表单中进行规则设置,当触发提交或者流程中的下一页时触发这些规则校验

    表单

    <Form ref="businessInfo" :model="businessInfo" :rules="businessInfoRule" :label-width="120">
        <Row>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="业务信息:" prop="objectInfo">
                                            <!-- {{sendData.busnissMsg}} -->
                                            <Input v-model="businessInfo.objectInfo" placeholder="具体使用集群的业务名称"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="OP:" prop="op">
                                            <Input v-model="businessInfo.op" placeholder="产品线OP"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
                                <Col span="8">
                                    <Col span="22">
                                        <FormItem label="项目邮件组:" prop="mailGroup">
                                            <Input v-model="businessInfo.mailGroup" placeholder="邮箱地址"></Input>
                                        </FormItem>
                                    </Col>
                                </Col>
        </Row>  
    </Form>
    

    规则在data中设置

    • 子key的名字和上述表单子项的prop设置的名字要一样
    businessInfoRule:{
                    op:[
                        {required:true,message: '请填写业务op',trigger: 'change'}
                    ],
                    mailGroup:[
                        {required:true,type:'email',message: '请正确填写邮箱信息',trigger: 'change'},
                    ],
                    note:[
                        {required:true,message: '请填写业务用途',trigger: 'change'},
                        {max:30,message: '请限制在30个字范围内',trigger: 'change'}
                    ],
                    objectInfo:[
                        {required:true,message: '请填写业务信息',trigger: 'change'},
                    ]
                },
    

    规则校验的函数以及调用函数

    • Promise是内置的函数
    • this.checkForm().then(res=> 这里的res是checkForm函数返回的结果集
      
    • 通过Promis和this.checkForm().then(res=>这种调用方法实现同步调用,即当checkForm执行完毕后才会进入下一逻辑
    checkForm(){
                return new Promise((resolve, reject) => {
                    this.$refs['businessInfo'].validate((valid) => {
                        console.log('inner')
                        console.log(valid)
                        if (valid) {
                            resolve(true)
                        } else {
                            this.$Message.error('请检查业务及归属信息');
                            checkResult = false
                            resolve(false)
                        }
                    })
                })
    },
    changeCrrentPage(){
        this.checkForm().then(res=>{
                            if (res){
                                console.log(res)
                                this.defaultPage = page;
                                this.$refs.flowApply.changePage(page)
                            }
                        })
        break  
    }
    

    错误的写法

    • 以前均是采用此中方法进行校验,但是升级了iview组件之后此方法不在生效,在调用checkForm函数时其变为了异步方式,即if(this.checkForm()) 这里的返回时undefined
    checkForm(){
                return new Promise((resolve, reject) => {
                    this.$refs['businessInfo'].validate((valid) => {
                        console.log('inner')
                        console.log(valid)
                        if (valid) {
                            return(true)
                        } else {
                            this.$Message.error('请检查业务及归属信息');
                            return false
                        }
                    })
                })
    },
    changeCrrentPage(){
        if (this.checkForm()) {
                            this.defaultPage = page;
                            this.$refs.flowApply.changePage(page)
                        }
        break  
    }
    
    展开全文
  • Vue form 表单提交+ajax异步请求+分页

    千次阅读 2017-04-21 17:59:58
    <!DOCTYPE html> ,initial-scale=1"> 异步参数上传 <lin
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta charset="UTF-8"/>
        <title>异步参数上传</title>
        <link rel="stylesheet" type="text/css" href="${ctx }/css/bootstrap.min.css">
        <#--<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>-->
        <link href="${ctx }/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="${ctx }/css/css.css"/>
        <#--<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css"/>-->
        <link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css"/>
        <script>var $context = {};
        $context.ctx = '${ctx}';
        $context.resources = '${ctx}/resources';
        </script>
    </head>
    <body>
    <div id="app" class="htmleaf-container">
    
        <div class="container kv-main">
            <br>
            <div style="margin-left: 200px;" class="robot-b-name">
                <a class=".btn btn-primary" href="">返回上传页面</a>
            </div>
            <br>
            <form @submit.prevent="submit" class="well form-inline">
                <input type="text" class="input-big" style="width: 500px" v-model.trim="batchInforRequestVO.appkey"
                       placeholder="请输入appkey">
                <input type="text" class="input-group" style="width: 500px" v-model.trim="batchInforRequestVO.batchnum"
                       placeholder="请输入批次号">
                <input type="hidden" class="input-group" style="width: 500px"
                       v-model.trim="batchInforRequestVO.currentPage">
                <button type="submit" class="btn btn-info">查询</button>
            </form>
            <br>
            <!--提示框公共部分begining-->
            <div class="modal-mask" v-show="show">
                <div class="modal-confirm">
                    <h4 class="confirm-header">
                        <i class="iconfont icon-questioncircle"></i> {{ title }}
                    </h4>
                    <div class="confirm-content">
                        {{ content }}
                    </div>
                    <div class="confirm-btns">
                    <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                        <button class="btn btn-primary" v-on:click="opt(2)">确 定</button>
                    </div>
                </div>
            </div>
            <br>
            <!--提示框公共部分ending-->
            <div class="modal-mask" v-show="showcontent">
                <div class="modal-confirm">
                    <h4 class="confirm-header">
                        <i class="iconfont icon-questioncircle"></i> {{ title }}
                    </h4>
                    <div class="confirm-content">
                        {{ content }}
                    </div>
                    <div class="confirm-btns">
                    <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                        <button class="btn btn-primary" v-on:click="opt(3)">确 定</button>
                    </div>
                </div>
            </div>
            <div>查询结果</div>
            <!-- TableBegining -->
            <div>
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <th>批次号</th>
                        <th>处理进度</th>
                        <th>文件名称</th>
                        <th>上传时间</th>
                        <th>请求方法</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(batchInforResponseVO, index) in BatchInforResponseVO ">
                        <td>{{batchInforResponseVO.batchNum}}</td>
                        <td>{{batchInforResponseVO.processPercentage}}</td>
                        <td>{{batchInforResponseVO.channelName}}</td>
                        <td>{{batchInforResponseVO.inserTime}}</td>
                        <td>{{batchInforResponseVO.requestAddre}}</td>
                        <td><a id="opreat" v-on:click="defaultExport(index)" href="#">导出 </a><a
                                v-on:click="redirectTo(index)" id="opreat" href="#">自定义导出 </a></td>
                    </tr>
                </table>
            </div>
            <!-- TableEnding -->
            <!-- 分页部分Begining -->
    
            <div class="span6" style="width:25%;margin-right: 10px;float: right;">
                <div style="width: 500px;" id="DataTables_Table_0_length">
                    <span> 每页10条记录 当前页{{batchInforRequestVO.currentPage}}</span> &nbsp
                    <span>{{totalPage}}页&nbsp<a id="previousPage" v-on:click="changePage(1)" href="#">←上一页</a>&nbsp &nbsp<a
                            id="nextPage" v-on:click="changePage(2)" href="#">下一页 →</a></span>
                </div>
            </div>
            <!-- 分页部分Ending -->
    
        </div>
    </div>
    </div>
    </body>
    <script type="text/javascript">
        window.history.go(1);
    </script>
    <script src="${ctx }/js/jquery/jquery-2.0.3.min.js"></script>
    <script src="${ctx }/js/jquery.form.js"></script>
    <script src="${ctx }/js/vue/vue.js"></script>
    <script src="${ctx }/js/business/exportconfig.js" type="text/javascript"></script>
    
    </html>
    var vue = new Vue({
        el: '#app',
        data: {
            batchInforRequestVO: {
                currentPage: 1,
                appkey: '',
                batchnum: ''
            },
            show: false,
            showcontent: false,
            onCancel: false,
            onOk: false,
            totalPage: 0,
            title: '提示框',
            content: '加载......',
            message: '批量数据处理',
            BatchInforResponseVO: []
    
        },
        methods: {
            refreshTest: function () {
                location.reload(true)
            },
    
            //输入框增加方法
            add: function () {
                this.user.names.push({
                    text: ""
                })
            },
    
            //输入框删除方法
            decrease: function (index) {
                if (!index == 0) {
                    this.user.names.splice(index, 1)
    
                }
    
            },
            changePage: function (type) {
                if (type == '1') {
                    debugger
                    if (this.batchInforRequestVO.currentPage == '1') {
                        vue.showcontent = true;
                        vue.content = '已经是首页啦!';
                        return
                    }
                    this.batchInforRequestVO.currentPage--;
                    this.submit();
                }
                else if (type == '2') {
                    this.batchInforRequestVO.currentPage++;
                    debugger
                    if (this.batchInforRequestVO.currentPage > this.totalPage) {
                        this.batchInforRequestVO.currentPage--;
                        vue.showcontent = true;
                        vue.content = '已经是尾页啦!';
                        return
                    }
                    this.submit();
    
                }
    
            },
            checkparam: function () {
    
                if (this.batchInforRequestVO.appkey == '' && this.batchInforRequestVO.batchnum == '') {
                    vue.showcontent = true;
                    vue.content = '查询参数不可以为空!';
                    return false
                }
                else {
                    return true
                }
    
    
            },
            opt(type){
    
                this.show = false
                if (type == '1') {
                    if (this.onCancel) this.onCancel()
                }
                else if (type == '3') {
                    this.showcontent = false
                    if (this.onOk) this.onOk()
                }
                else {
                    if (this.onOk) this.onOk()
                    vue.refreshTest();
                }
    
                this.onCancel = false
                this.onOk = false
    
                document.body.style.overflow = ''
            },
    
            submit: function () {
                debugger
                var data = JSON.stringify(this.batchInforRequestVO); // 这里才是你的表单数据
    
                if (!vue.checkparam()) {
                    return
                }
                ;
                //da.append("name", this.name)可以逐次添加多个参数
                $.ajax({
                    url: '../interface/queryBatchInfor',
                    data: data,
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'JSON',
                    // cache: false,
                    processData: false,// 告诉jQuery不要去处理发送的数据
                    // contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    
                    success: function (data) {
                        debugger
                        if (data.respCode == 'success') {
                            vue.BatchInforResponseVO = data.batchInforResponseVOList;
                            vue.totalPage = data.totalPage;
                        } else {
                            vue.show = true;
                            vue.content = data.respMsg;
                        }
                        console.log(data)
                    },
                    error: function (data) {
                        vue.show = true;
                        vue.content = '系统内部错误';
                    }
                })
    
    
            },
            defaultExport: function ($index) {
                debugger
                var index = $index;
    
                window.location.href = $context.ctx + "../interface/defaultexcport?batchNum=" + this.BatchInforResponseVO[index].batchNum;
            },
            redirectTo: function ($index) {
                vue.showcontent = true;
                vue.content = '进行中......';
                debugger
                var index = $index;
                // window.location.href = $context.ctx + "../interface/to_autoconfig?batchNum="+ this.BatchInforResponseVO[index].batchNum;
            }
    
    
        }
    
    })
    
    
    
    
    展开全文
  • 问题:vue前端表单数据post提交之后,后台controller拿不到值 前言:今天做多条件查询提交表单之后,发现后台拿不到值,在后端controller加上@RequestBody还是拿不到,最后,使用qs完美解决了问题 项目环境:...
  • Vue中进行异步请求

    万次阅读 2018-09-06 17:49:50
    前端的数据均是通过接口请求拿到的,而Vue本身不支持ajax请求,那么该怎么解决Vue中的异步请求呢?这儿提供了几种方法,希望对大家有所帮组。 一、axios实现异步请求 1.项目中安装axiox npm install –...
  • 伪ajax上传文件 伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ... flask jQuery ajax 上传...
  • leo-vue-validator一个基于vue2异步表单验证组件
  • &lt;form @submit.prevent="submit($event)"&gt; &lt;input type="text" class="form-control" placeholder="请输入姓名" name="cuserName"...
  • 父组件调用子组件的表单验证方法是异步的 // 子组件的方法 validateForm(){ this.$refs.jsonEditor.getRef("form").validate((valid, hints) => { return {valid: valid, hints: hints} }) } // 父组件调用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,312
精华内容 4,124
关键字:

vue表单提交异步

vue 订阅