element plus表单自定义校验规则不起作用

已于 2022-02-15 15:50:36 修改
阅读量3k 收藏 2
点赞数 5
文章标签： html css css3 elementplus vue.js
于 2022-02-15 15:34:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Smile_666666/article/details/122945884
版权

element plus表单自定义校验规则不起作用
1.今天遇到使用element plus表单自定义校验规则一直不起作用，借鉴了网上很多解决方法都不行，后面发现原来是书写的先后顺序，导致不起作用

原因：script step 里面的代码都是渲染后立即执行的，遵从先声明后使用的规则
在这里插入图片描述
2.解决方法：
在这里插入图片描述

Smile_zxx
关注
element plus表单自定义校验规则和验证单个字段
温情
05-13 5410
关键代码 // prop 设置校验规则 <el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px"> <el-form-item label="手机号" prop="tel"> <el-input v-model="registerForm.tel" autocomplete="off" placehold
Vue使用Element-plus表单v-for校验规则问题
LittleLogan的博客
12-31 2017
Vue使用Element-plus表单v-for循环校验规则
Vue3组件ElementPlus：表单校验不起作用
最新发布
m0_63822012的博客
10-08 172
element-plus中的表单数据校验失效
2301_76149545的博客
11-26 2152
例如el-form上绑定的数据的data，那么el-form-item中绑定的需要是data的元素，用来指定使用哪一个元素作为校验规则，复制element-plus官网上的校验就可以使用，经过我反复对比，原来给form表单绑定数据需要写成。:model绑定自己的表单数据，:rules绑定自己的校验规则。1.el-form表单上的。给form表单简单加一个必选，和长度的校验。的所以el-form中需要写成：model。:reles绑定的数据的元素。，需要提供表单对象，所以使用。是用来绑定属性的 而。
Elment-plus表单验证规则，不生效解决办法
蒙古国海军司令部
06-06 608
Elment-plus表单验证规则不生效
[后台系统]element plus自定义表单规则时，不执行 validate校验
qq_41228905的博客
03-07 1910
使用技术为vue3+element plus，以下内容为个人理解，如有错误请指正。 解决办法 在自定义规则方法中，不管判定成功或者失败，都需要去调用callback，否则不执行element的validate表单校验。 // 数字校验规则 const numberRule = (rule, value, callback) => { const num = Number(value) if (!isNaN(num) &&
Element-Plus自定义表单验证失效原因之一
qq_29983177的博客
08-11 1122
需要保证prop属性名与表单属性名以及验证规则属性名3个地方一致。
Element-plus + ts中，验证表单使用自定义校验规则
weixin_59739381的博客
08-05 1313
vue3中，Element-plus + ts中，验证表单使用自定义校验规则
element Form表单 自定义校验规则，添加校验validator
Kris_xiaoxiao的博客
07-08 1103
element 表单 自定义校验 validator elForm
element plus 自定义表单控件触发校验
Holly1945的博客
08-12 1610
emit,mitt,element plus
element表单内嵌表格，table多行数据自定义校验以及自定义传参
卡卡罗特的博客
09-16 1137
element表单多行数据自定义校验以及自定义传参
Element-Plus表单校验非Element-Plus表单组件不触发校验解决办法
dielian520的博客
11-17 1566
Element-Plus表单校验非Element-Plus表单组件不触发校验解决办法
ElementPlus表单校验无效
qq_43750656的博客
07-23 978
elementplus表单校验无效。
解决Element中表单校验规则不生效问题（vue项目）
编程小白的博客
11-29 1428
解决Element中表单校验规则不生效问题（vue项目）
【vue】vue引用element plus的对话框中的rules不起作用
m0_63667667的博客
05-05 525
2.<el-form-item>标签内必须有prop属性。rules不起作用的原因：1 :rules要写在<el-from>标签里面，不能写在<el-dialog>中间。
jquery validator自定义校验规则不生效
kfgauss的博客
04-13 932
自定义手机号码验证规则，但是并没有生效。 折腾老半天，看到文章： this.optional(element)作用 原来是this.optional（element）是在元素非空的时候才校验，元素为空不校验。 基础不扎实的结果。不过现在jQuery已经用的少了。但是不懂还是这么悲剧。 最近在写一个项目时，前端验证框架同事选择了jquery.validator.js的验证框架！在扩展验证规则的时候，发现自定义函数phone验证时，require值传入false发现也会验证，去掉phone就没有该问题，查看
VUE3基于element-plus二次开发的表单内容组件或者自定义的表单内容组件无法自动触发表单校验问题
qq_36641900的博客
04-13 1806
这只是最简单基于输入框二次封装的一个例子，可能有人说，他的能触发，这个我们不深究，因为确实有能触发的情况，但是我们做的项目可能定制程度比较高，中间逻辑有些复杂，就不能触发表单的校验规则了，不论规则配置的trigger值是change或者blur或者其他事件，都不能正常触发。对于自定义组件或者二开组件还有一种情况是可能需要用到表单上绑定的一些属性，比如form的size等内容，可以通过依赖注入的方式拿到，key是Symbol值，因为Symbol的特殊性，你必须从element-plus内引入这个值。
element-ui 表单的验证不生效可能有以下几种原因：v
qq_70036866的博客
06-20 2461
表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。
element plus，表单校验
09-07
Element Plus是一个基于Vue.js的UI组件库，它是由Element UI团队开发的轻量级版本。Element Plus致力于提供简洁、易用并且高度可定制的Web界面组件，适用于构建现代企业级应用。其中，表单校验是Element Plus中非常关键的一部分。 在Element Plus的表单组件中，它内置了丰富的验证功能，可以帮助开发者轻松处理用户输入的数据验证。你可以使用预设的验证规则，如`required`（必填）、`min`和`max`（数字范围）、`email`等，也可以自定义验证规则。通过设置`v-model`绑定和`validate`指令，可以实时监控字段变化并显示相应的错误提示。 例如，创建一个简单的表单验证示例： ```html <template> <el-form :model="form" :rules="rules"> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> <el-form-error slot="message">邮箱格式错误</el-form-error> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { email: '' }, rules: { email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }] } }; }, methods: { submitForm() { this.form.validate((valid) => { if (valid) { console.log('提交成功'); } else { console.log('表单验证失败'); } }); } } }; </script> ``` 在这个例子中，当用户离开邮箱输入框时（触发`blur`事件），会自动进行校验。如果输入不符合规则，就会在下方显示错误信息。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Smile_zxx

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值