解决elementui表单自动验证问题

已于 2022-01-24 13:26:28 修改
阅读量859 收藏 1
点赞数
分类专栏： Vue 文章标签： elementui vue.js javascript
于 2022-01-24 13:23:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51053759/article/details/122665593
版权 
this.$nextTick(() => {
	this.$refs.ruleForm.clearValidate()
})

将上方代码加在弹框的确定、取消按钮隐藏弹框的语句后面，其中ruleForm为表单名

sparrow_girl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解ElementUI之表单验证、数据绑定、路由跳转
08-30
ElementUI表单验证、数据绑定、路由跳转详解 ElementUI是一个基于Vue.js的组件库，为开发者提供了丰富的UI组件和功能强大的表单验证机制。本文将详细介绍ElementUI的表单验证、数据绑定、路由跳转的实现方法和原理...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
当`el-form-item`的`:prop`属性与`el-form`的`:model`中的某个属性相对应时，就可以实现表单的自动验证。 在表格中实现表单验证的关键在于动态绑定`prop`属性。例如，在一个包含姓名和地址的表格中，每个表格行...
Element UI打开表单自动验证问题的解决
最新发布
10-18 1145
页面一打开什么都没做表单就自动验证的解决方法
element 切换页面，表单rules自动校验如何关闭。
qq_38425020的博客
01-28 2788
element 官网有个属性，validate-on-rule-change，将此属性设置为false并且使用resetFields方法将form表单重置并移除校验结果。由于业务场景需要对切换元素时，rules重新赋值，此时页面会出现自动校验表单的元素，用户体验很差。
element-ui form表单，select多选时，初始自动校验问题解决
vue-cli脚手架初始化代码
11-10 2525
element select 下拉框校验问题
element-ui 表单自动校验
凡尘
04-20 157
element 表单自动校验
element表单一打开就校验的问题解决办法分享
我爱美女S的博客
06-26 6305
表单弹框一打开就校验的问题解决分享
vue使用element表单出现自动验证问题
weixin_61597234的博客
09-30 3606
解决form表单自动验证的问题（没输入任何内容，刚打开表单就出现红色验证信息）
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
本文将详细讲解如何在Vue+ElementUI环境中解决这个问题，即在关闭对话框时清空验证和清除表单数据。 首先，我们需要在对话框的取消按钮上添加一个点击事件，例如： ```html ('addGroupData')">取消 ('...
elementui的表单可视化编辑器自动生成表单验证代码
08-12
ElementUI的表单可视化编辑器是一款基于Vue.js的前端组件库——Element UI的扩展工具，它的主要目的是简化和自动化表单验证代码的编写过程。在实际的Web开发中，使用Element UI创建表单时，通常需要手动编写验证规则...
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： :title=titleName...
element 验证出现英文以及自动验证问题
vscode_js的博客
12-15 2184
最近在项目开发中用到了element-ui框架，写了一套很长的表单提交，用到了el-form整这个组件，用这个组件的好处就是我们不用单独去做表单的校验，也省了一堆if条件判断，下面请看官方示例： <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pa
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
热门推荐
和子昭的博客
05-28 17万+
来自”和“小编的小提示：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在&lt;el-form-item&gt;上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）2.el-form...
el-form表单报错
凡尘
05-08 173
el-form表单报错
vue element表单去掉某一项的校验
总结前端开发中遇到的问题，分享前端知识
04-06 4446
// 方式一 this.$refs.ruleForm.clearValidate('item1') // 方式二 this.$refs.ruleForm.fields.map(i => { if (i.prop === 'item1') { i.clearValidate() } })
this.$refs[formName].validate((valid) =＞{}) 无效
qq_42309765的博客
12-21 1万+
elementUI 表单校验，在校验不通过时可以打印出值，校验通过反而不打印了 submitForm(formName) { console.log(1111); console.log("formName", formName); this.$refs[formName].validate((valid) => { if (valid) { //不打印 this.$message({ showClose
ElementUI--表单验证以及踩坑
苏宛墨的博客
04-21 795
表单验证以及踩坑 验证方法–整体验证(validate) this.$refs["ruleForm"].validate((valid) => { if(valid){ //这里执行你验证通过需要用的代码 }else{ //这里执行验证未通过的代码 console.log("error submit!!"); return false; } } 验证方法–局部验证(validateField) - 单个验证 th
执行this.$refs[formName].validate((valid) =＞{})代码没有提示用户message且rule没反应
树上骑个猴的博客
12-03 1818
1。首先就是在自定义校验规则的时候，if写完后没有写 callback（） 2。打印一下this.refs[formName]或者this.refs[formName]或者this.refs[formName]或者this.refs.formName，检查是否拿到了正确的需要验证的form。查看绑定的元素是否写对 3。如果前两个都没有问题，检查自定义的校验规则，看看有没有写错 你可以依次注释掉的一个校验规则，看看注释掉哪个，功能实现了，就说明哪个的校验规则有问题 ...
elementui自定义表单验证规则
07-14
在 Element UI 中，可以通过自定义验证规则来验证表单输入的数据。面是一个示例代码，演示何自定义验证规则： ```javascript // 导入 Element UI 的验证规则方法 import { validate } from 'element-ui' // 自定义验证规则 const customRules = { // 自定义规则名称：验证函数 customRule1: (rule, value, callback) => { if (value === 'custom') { callback(new Error('自定义规则1验证失败')) } else { callback() } }, customRule2: (rule, value, callback) => { if (value.length < 5) { callback(new Error('自定义规则2验证失败')) } else { callback() } }, } // 在表单中使用自定义验证规则 <el-form :rules="customRules"> <el-form-item label="自定义规则1"> <el-input v-model="input1"></el-input> </el-form-item> <el-form-item label="自定义规则2"> <el-input v-model="input2"></el-input> </el-form-item> </el-form> ``` 在上面的代码中，我们首先导入了 Element UI 的验证规则方法 `validate`。然后定义了两个自定义验证规则 `customRule1` 和 `customRule2`，这两个规则分别对输入的值进行验证，并根据验证结果调用回调函数 `callback`。当验证失败时，使用 `new Error()` 创建一个错误对象，并传递给回调函数；当验证通过时，直接调用回调函数即可。 最后，在表单中使用自定义验证规则时，将自定义规则对象 `customRules` 通过 `:rules` 属性传递给 `el-form` 组件。在每个需要验证的表单项中，通过 `v-model` 绑定输入的值，然后在 `el-form-item` 组件中添加相应的标签和验证提示信息。 这样，当用户输入的值不符合自定义的验证规则时，Element UI 会自动显示相应的错误提示信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值