首页 > 其他分享 >element表单必填校验,并自动定位到必填项

element表单必填校验,并自动定位到必填项

时间:2023-09-06 11:48:48浏览次数:35  
标签:object 必填 dom refs Object 校验 表单 element

需求:

1、element form volid 必填提示框警告
2、自动定位到首个未通过校验字段

实现思路:
1.validate 校验需要给提交事件添加一个参数 object ;

2.当校验不通过时收集所有未通过字段项提示信息,将其通过 push 方法添加到定义好的数组中(str);
3.通过 this.$refs[Object.keys(object)[0]] 获取到首个字段校验不通过的提示信息;
4.利用 Object.prototype.toString.call() 方法判断 this.$refs[Object.keys(object)[0]] 的类型是否为对象的字符串形式;
5.最后通过 scrollIntoView 方法滚动到首个不通过校验字段项。

* 必填的el-form-item需要添加ref(建议ref与prop同名,ref用于定位

 校验逻辑代码:

this.$refs['xxx'].validate((valid, object) => {
	if (!isValide) { 
    let str = []
    for (let key in object) {
      object[key].map(item => {
        str.push(item.message)
      })
      let dom = this.$refs[Object.keys(object)[0]]
      if (Object.prototype.toString.call(dom) !== '[object Object]') {
        dom = dom[0]
        break
      }
      // 定位代码
      dom.$el.scrollIntoView({
        block: 'center',
        behavior: 'smooth'              
       });
     }
        // this.$message.error(str.join(', '));
     this.$message({
       type: 'warning',
        message: '请检查必填项是否填写完整',
        offset: 300
      }) 
      return  false
  } else {
     // 业务逻辑修改
  }
})
            

  

标签:object,必填,dom,refs,Object,校验,表单,element
From: https://www.cnblogs.com/litterjoan/p/17681900.html

相关文章

  • 安装表单中控件
    body-parser官网https://www.npmjs.com/package/body-parser用途:用于解析表单数据npminstallbody-parser在app.js中导入body-parser//解析表单数据的中间件//防止req.body等于undefinedconstbodyParser=require('body-parser')app.use(bodyParser.urlencoded({ extended......
  • Element UI实现每次只弹出一个Message消息提示
    前言在开发Web应用程序时,我们经常需要使用消息提示来向用户展示重要信息。ElementUI提供了一个方便易用的组件——Message,可以用于显示各种类型的消息提示。然而,默认情况下,当多个消息提示同时触发时,它们会依次累积在页面上,导致界面上出现多个消息提示。本篇博客将介绍如何通过对......
  • 笔记 | element table show-overflow-tooltip 位置偏移的问题
    一、问题因为我目前的项目是微前端的工程,最外层有一个50px的通用头部,所以页面要减去50px。所有页面看似都很完美,但是使用el-table-column的show-overflow-tooltip属性时,tooltip会向下偏移50px。想到的解决办法:按照el-tooltip的属性更改placement="right"能解决。但......
  • element table 表格控件实现单选功能
      <el-table:data="tableData"borderstriperef="tableData"@row-click="singleElection"><el-table-columnlabel=""width="65"><templateslot-scope="......
  • web使用cookie创建表单
    举例:                deftest_003():url='https://xx.com/user-login.html'#启动浏览器browser=webdriver.Chrome('/usr/local/bin/chromedriver')browser.get(url=url)browser.maximize_window()#设置页......
  • 今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单eleme
    2023-09-04今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单element组件练习之后,查看组件的时候,样式一直出不来,经过我多次排查,终于发现,导入的三个内容是有顺序排序要求的。必须先导入vue,然后再导入其他的两个。<!DOCTYPEhtml><htmllang="en">......
  • Vue 3 之 Element Plus 之 Pagination 的 坑
    版本信息:vue.js3.3.4ElementPlus2.3.12浏览器ChromeVersion116-- 坑描述试验ElementPlus之分页时,出现了异常——之前开发的弹窗打不开了。 Pagination分页:https://element-plus.org/zh-CN/component/pagination.html 在页面加里了一些弹窗(对话框):<el-......
  • avue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲
    avue表单组件后台拖拉拽框架avue-form-design:https://github.com/sscfaith/avue-form-designavue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲染转换适配待补充......
  • Vue element 表格跨行合并单元格
    1、定义table.js/***生成表格合并行坐标阵列rowspan、colspan信息*@param{表格数据}tableData*@param{合并列字段}mergeColumnsexample:["filed1",[filed2]]*@returns坐标阵列*/exportfunctiongetTableSpanMap(tableData,mergeColumns){varspa......
  • 判断对象是否发生变化,常用于监听页面表单是否修改并给出保存提示
    本文主要封装方法,实现用户离开表单编辑页面时弹出提示框,若表单数据发生变化,则提示用户是否保存当前页面的信息,如图: 封装方法:1/**2*比较俩个对象之间的差异,项目中多处用到监听表单数据是否改动,故封装此方法3*如果数据改动,则返回新旧对象记录改动字段的新旧值4......