Element UI 多个Form表单同时验证

这篇具有很好参考价值的文章主要介绍了Element UI 多个Form表单同时验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里讲的主要是Element UI 组件的表单验证,Element UI 的Form表单验证是依靠 ref 来进行的,但是当一个页面有用到多个Form表单的时候,又要同时对这多个表单进行验证,这个时候写在后面的Form表单会覆盖前面的样式,导致只会验证最后一个

解决方案:文章来源地址https://www.toymoban.com/news/detail-506057.html

async submitForm(formName) {
        try {
        await Promise.all([
          this.$refs.ruleForm1.validate(),
          this.$refs.ruleForm2.validate()
        ]);
        // 验证成功
        console.log('submit');
      } catch (error) {
         // 验证失败
        console.log("error submit!!");
        return;
      }

到了这里,关于Element UI 多个Form表单同时验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate

    element UI —— form表单中Radio单选框进行切换 表单验证rule动态校验-validator 保存前进行form表单校验后才能上传-validate 1、效果图 2、代码 结构 数据

    2024年02月07日
    浏览(54)
  • Element ui plus Form 表单验证失败后,自动滚动到失败的位置(validate)(scrollToField)

    对于表单验证失败后,想自动定位到失败的位置  1.首先发起表单验证,失败后拿到组件失败的回调参数 valid:返回一个boolean类型 ValidateFieldsError:返回失败的组件信息,如下  当valid为false时,利用scrollToField() 滚动到相应的错误位置处 代码如下:

    2024年02月11日
    浏览(40)
  • Element-UI form表单 resetFields() 重置表单无效问题

    原因: resetFields() 是将表单项重置为初始值,而这个初始值是在 Vue mounted 时赋值上去的,如果在这之前对表单进行了赋值,则初始值会改变,那么后面调用 resetFields() 则不会生效(不会是定义时的空值) 方法1:将赋值操作定义在 this.$nextTick() 中(保证了初始值不被修改)

    2024年02月11日
    浏览(80)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(65)
  • element-plus el-form 表单、表单验证 使用方法、注意事项

    element-plus@2.0.6 及之后的版本,表单验证不再是同步执行的了 另外, element-plus@2.1.4 及之后的版本,才可按照官方文档示例正常使用(使用的是两者的中间版本的话,最好先自行确认下正确的 上例中: 如果在“ 位置1 ”执行表单验证通过后的业务代码,可以去掉 async...await 如

    2024年02月05日
    浏览(63)
  • element ui form表单循环嵌套 及嵌套表单item的校验方法

    html:  js:  详细的大家可以参考:element ui form循环嵌套表单 及嵌套表单的验证方法(校验)_element循环表单_RxnNing的博客-CSDN博客

    2024年02月09日
    浏览(53)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(47)
  • Element-UI可以动态生成的form表单

    此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是一个对象数组,但我们需要的是表单的值组成的对象

    2024年02月11日
    浏览(52)
  • element-plus的form表单验证Prop和Rules设置约定

    在使用表单验证过程中遇到深层对象(即嵌套对象)和数组或动态创建数组对象时验证不再起作用或者出现错误。 官网的说明“ Form  组件提供了表单验证的功能,只需为  rules  属性传入约定的验证规则,并将  form-Item  的  prop  属性设置为需要验证的特殊键值即可。 更多高

    2024年02月16日
    浏览(54)
  • vue + element-ui 循环生成指定form表单

    最近遇到一个需要超级写超级多字段的表单,初略计算大概四十来个吧字段吧,/(ㄒoㄒ)/~~,这也太麻烦了,想了想能不能简单封装一下,找到了个巨人,嗯哼,就踩一下吧 参考文章: Vue3.0 根据JSON对象生成指定form表单 上面文章是vue3的,逻辑都一样。以下是vue2 我的写法 注

    2024年02月11日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包