js监听表单内容，点击返回表单内容不为空时提示取消或返回

Myth丶恋晨 2022-11-12 02:45 165阅读 0赞

//  表单数据类型示例
    //   formData: {
    //   name: '',
    //   age: '',
    //   sex: '',
    //   height: '',
    //   interest: [],
    //   subjectArr: [],
    //   },
    // true 提示， false直接返回 
    var flag = Object.values(this.formData).some(
        item => {
         // if (item instanceof Array) {
         //   return item.length > 0
         // }
       return item.length > 0
      })
     if (!flag) {
        // 直接返回
      } else { 
        // 不返回，弹出提示 此处使用了ElementUI
        this.$confirm('您已输入部分内容，是否确认返回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
           // 执行返回操作
         }).catch(() => {
           this.$message({
           type: 'info',
           message: '已取消返回!'
             });
         });
     }

当用户输入了表单部分内容点击返回按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20221022/fd9633b1aba9465ab42c96e7818cff6c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关表单基本内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

太过爱你忘了你带给我的痛/ 2023年07月25日 11:24/ 0 赞/ 8 阅读

相关 Jquery清空表单内容

JQuery :not() 选择器定义与用法： :not() 选择器选取除了指定元素以外的所有元素。最常见的用法：与其他选择器一起使用，选取指定组合中除了指定元素

悠悠/ 2023年03月01日 13:28/ 0 赞/ 122 阅读

相关 js监听表单内容，点击返回表单内容不为空时提示取消或返回

// 表单数据类型示例 // formData: { // name: '', // age: '', // sex:

Myth丶恋晨/ 2022年11月12日 02:45/ 0 赞/ 166 阅读

相关 html表单中的数据提交后清空,js清空form表单中的内容示例

//清空form选择 function clearForm(id)\{ var formObj = document.getElementById(id); if(for

向右看齐/ 2022年10月06日 07:57/ 0 赞/ 327 阅读

相关 element关闭弹框时清空表单内容

需求：关闭弹框时清空表单内容解决方法：使用@close事件，函数可以自定义 eg : resetForm()、closeDialog() <el-dialog :

爱被打了一巴掌/ 2022年10月05日 09:58/ 0 赞/ 350 阅读

相关 js（jquery）提交表单，必填内容为空，边框变红

[求教 jquery点击提交判定input的表单内容为空，边框显示红色][jquery_ _ _input_] [js验证非空后，输入框边框变红，如果输入正确怎么让边框

我不是女神ヾ/ 2022年09月10日 06:23/ 0 赞/ 160 阅读

相关点击按钮，生成表单

js： function addrow() \{ var table = document.getElementById("test\_table");

ゝ一纸荒年。/ 2022年07月12日 10:09/ 0 赞/ 260 阅读

相关 Jquery真正意义上清空表单内容

[\[jQuery\] 真正意义上清空表单内容][jQuery_] 标签： [JQuery][][form][][reset][][清空表单内容][Link 1][重置表

た入场券/ 2022年06月17日 11:42/ 0 赞/ 551 阅读

相关 S实现表单内容验证、阻止表单提交（onsubmit）

onsubmit属性只在 `<form>` 表单中使用。 onsubmit事件是当表单提交时进行相关JS操作的一个事件。 onsubmit事件会在表单中的确认按钮被

悠悠/ 2022年05月11日 02:40/ 0 赞/ 412 阅读

相关表单提交添加点击事件，并判断内容是否为空

表单提交添加点击事件，并判断内容是否为空最近刚好在做到个人博客发表博客部分，包括标题、分类以及内容三个部分。通过form表单提交，这里只做相对简单的处理，提交的时候需要

灰太狼/ 2022年04月06日 13:08/ 0 赞/ 206 阅读