element el-form表单验证 解决rules中引用不到form或者data值的问题

于 2019-08-08 16:30:28 发布 9472 收藏 6
文章标签： element el-form表单验证 解决rules无法获取data
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37471721/article/details/98872118
版权

问题描述
在项目中经常用到表单验证，例如校验长度，校验是否存在，校验格式是否正确
but今天在校验两次输入内容是否一致(例如校验密码)的时候卡了壳，通常大家在校验这种问题的时候应该是这样写的
在这里插入图片描述
在这里插入图片描述
碰壁过程
这样写的话确实能够实现这个功能，但是没有达到复用的效果，设想如果多个页面都有验证两次输入内容是否一致的需求，难道每次都要在data中声明一个校验重复的方法validatePass吗？
因此我想通过引用外部js的方式，把校验重复，校验电话格式，校验长度等校验方法全部放到这个js文件中，使用的时候把js文件import进来，直接调用相应的方法即可。行动如下
在这里插入图片描述
validatorTools.js中的内容
在这里插入图片描述
rules声明修改如下
在这里插入图片描述
but报错啦
在这里插入图片描述
也就是this.form.userPwd根本就获取不到, 我想是因为在实例初始化过程中不能这样使用，然后我把rules的定义挪到created里
在这里插入图片描述
这时不报错了，但是在created中定义又存在一个问题，就是获取到的this.form.userPwd永远只是初始值“”，并不会随着data的数据变化而变化，因为整个声明周期只会进入created一次。
解决办法
这个现象，让我想到了beforeUpdate，于是
在这里插入图片描述
在这里插入图片描述
在每次打开新增修改模态框的时候进行校验，在beforeUpdate中能够获取到this.form.userPwd的实时值，实现了我想要的功能。也许这并不是最好的解决办法，但是我真的尽力了。如果有小伙伴有更好的解决办法，一定要告诉我哟！

我的问题记录希望能帮到你，啦啦啦~

孟孟~
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
陈先生的博客
12-13 744
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
Nuxt配置Element-UI按需引入的操作方法
10-15
主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
VUE3基于element-plus二次开发的表单内容组件或者自定义的表单内容组件无法自动触发表单校验问题
最新发布
qq_36641900的博客
04-13 301
这只是最简单基于输入框二次封装的一个例子，可能有人说，他的能触发，这个我们不深究，因为确实有能触发的情况，但是我们做的项目可能定制程度比较高，中间逻辑有些复杂，就不能触发表单的校验规则了，不论规则配置的trigger值是change或者blur或者其他事件，都不能正常触发。对于自定义组件或者二开组件还有一种情况是可能需要用到表单上绑定的一些属性，比如form的size等内容，可以通过依赖注入的方式拿到，key是Symbol值，因为Symbol的特殊性，你必须从element-plus内引入这个值。
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器 目录 灵感 贡献 贡献者 执照 介绍 什么 el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF编辑器）也可以集成在一起，因此，用户可以使用json来渲染完整的表单。 为什么 在我们的日常开发中，有很多带有表单的页面，通常表单的结构是相似的，逻辑是重复的。 el-form-renderer没有复杂的逻辑。 它仅将JSON转换为呈现表单项，节省了时间和精力来编写业务逻辑，并减少了重复代码。 特征 用JSON渲染表单 支持与自定义组件集成 使用updateForm方法支持批量更新表单数据 支持setOptions方法，动态更改选择选项 内容支持inputFormat ， outputFormat ， trim以处理
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
ElementUI表单自动验证，获取不到表单值的解决办法
xiang_jiuxing的博客
11-07 1320
ElementUI表单自动验证，获取不到表单值的解决办法
el-form 自定义校验规则失效之坑 elementUI
weixin_45654407的博客
09-30 3395
自定义校验 如果你发现校验没有触发，也进不了校验，有if判断都要加上else把callback返回，不然如果没进入if判断，就没法把callback返回了，同是也无法继续提交了。 this.$refs.returnForm.validate((valid) => { 这里都进不来 if (valid) { } 错误示范 var validUseBalance = (rule, value, callback)
element-ui的form表单校验
minnyYu的博客
12-31 1811
element-ui表单校验步骤
ElementUI框架的form表单校验的几种方式
qq_44176252的博客
07-17 3422
elementUI的表单校验的几种方式
element自定义表单验证取不到值，看这四个地方
qq_42877655的博客
09-07 3471
<el-form 的 :model="V1" <el-form-item prop="V2" <el-input v-model="V1.V2" 验证 rules: { V2: [ { required: true,validator: validatePass2, trigger: 'blur' } ], }, 这四个地方的要仔细看了，保证所有的v1是一样的，所有的v2也是一样的，才能正常进行验证 ...
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+ element ui 表单验证有值但验证失败问题
01-19
<el model=form rules=rules> <el label=数据模板 prop=template> <el span=20> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true></el> </el> </el> </el> export ...
el-form 多层级表单的实现示例
11-19
前端开发过程中，经常遇到表单开发的需求，element-ui 为我们带来了极大的便利，前端只需要更专注于前端逻辑。 我们往往会遇到相对复杂的表单，比如下面的表单: 我们设计的时候可以把它设计成 3 级表单，即划分表单...
vue中使用element-ui进行表单验证的实例代码
12-29
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 •html中给el-form增加 :rules=”rules” •html中在el-form-item 中增加属性 prop=”名称” •js中直接在data中定义rules:{} •html部分 <el ref=...
表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？
weixin_44208883的博客
10-06 673
原因分析： 表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？ 对象里的值要一一对应到输入框的model，rules也要一一对应。 解决方案： <s-form :model="models" :rules="rules" > <s-form-title title="商品信息" /> <div v-for="(item, index, key) in models.sku_list" :key="key
Vue + iview select 表单校验明明有值，却提示没值
qq_36291747的博客
06-30 3155
1. 问题说明 在使用 iview 中的 select 表单项时，绑定必填校验规则后，遇到了这个神奇的问题：明显选中了值，打印出来也有值 – 一个整型的 id 值；但是，表单始终提示没有选择值！这是什么骚操作？表单部分截图如下： 2. 解决办法 查看 iview 官方组件使用文档，没有找到问题端倪… google 一下，找到了可行的解决办法： 将 select 表单项绑定的值改为字符串类型 :value="item.value+''" ： <FormItem label="基地名" prop="ta
el-form校验必填无法取值
寂地思和林的博客
09-02 461
el-form校验取不到值，watch深度监听失效 原因:表单值放在data的from属性中，在每次弹出修改框时，form=response.data,此时from中没有校验的字段，所以导致校验一直取不到值一直报必填错误，监听也失败了 解决： //因后台接口未返回这两个字段所以需要初始值，否则表单校验规则错乱 response.data.feeAttributeCode = response.data.feeAttributeCode ? response.data.f
帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件
03-24
好的，我可以为您提供代码示例，实现用 Vue Element-UI 封装一个带有分块、包含 el-form 的 el-tabs 组件。代码如下： ```vue <template> <div class="xs-tabs-form-container"> <el-tabs v-model="activeTab" style="height: 100%"> <el-tab-pane :label="pane.label" :key="index" v-for="(pane, index) in tabPanes"> <el-form :model="formData" :rules="formRules" ref="xsForm" label-width="100px"> <el-row :gutter="20" v-for="(element, rowIndex) in pane.elements" :key="rowIndex"> <el-col :span="12" v-for="(item, colIndex) in element" :key="colIndex"> <el-form-item :label="item.label" :prop="item.prop"> <template v-if="item.custom"> <slot :name="item.prop" :item="item"></slot> </template> <template v-else> <el-input v-model="formData[item.prop]"></el-input> </template> </el-form-item> </el-col> </el-row> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> export default { name: "XsTabsForm", props: { tabPanes: { type: Array, // [{label: 'Tab 1', elements: [[{label: 'Field 1', prop: 'field1'}]]}] required: true }, rules: { type: Object, // {field1: [{required: true, message: '不能为空', trigger: 'blur'}]} required: true } }, data() { return { activeTab: 0, formData: {} }; }, computed: { formRules() { const rules = {}; for (let key of Object.keys(this.formData)) { if (this.rules[key]) { rules[key] = this.rules[key]; } } return rules; } }, methods: { submitForm() { this.$refs['xsForm'].validate((valid) => { if (valid) { this.$emit('submit-form', this.formData); } else { this.$message.error('表单校验失败，请检查输入'); } }); } } }; </script> <style scoped> .xs-tabs-form-container { height: 100%; } </style> ``` 您可以通过 `tabPanes` 和 `rules` 两个参数传递组件中的标签页面和表单控制参数。每个标签页面可以包含多个行，每行包含多个表单项。可以选择使用默认的输入框，也可以通过 `item.custom` 参数自定义表单控件。您可以在 `submit-form` 事件中获取表单数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孟孟~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值