关于Element-ui el-cascader不能rules校验问题

最新推荐文章于 2024-04-26 16:52:30 发布
最新推荐文章于 2024-04-26 16:52:30 发布
阅读量1.4k 收藏
点赞数
文章标签： Vue el-cascader 自定义校验 组件验证 非必填验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57813267/article/details/126785758
版权

明明我能打印出选择的值，而且v-model也绑定成功了值，用vue-devtools扩展程序能看到绑定成功后的值

我的解决方法：

自定义表单校验规则，

不用 required 属性去校验是否必须验证，用自定义方式去校验 el-cascader 组件中是否有值 

 

 

 供各位参考

小易不加班.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementUI el-cascader 校验不到的处理方法
jyin_的博客
06-09 5305
<el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px"> <el-form-item label="所在省市:" prop="Provincelist"> <el-cascader v-model="form.Provincelist" :options="opt
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
Youyzq的博客
03-23 1746
Vue2 el-cascader 表单校验明明选择了参数但是不触发rules
实现 ＜el-cascader＞ 组件的回显功能
最新发布
CC酱写前端的博客
04-26 819
vue A页面，用户填写了el-cascader多层级数据，层级list数据从接口获取；vue B页面，多层级数据要进行回显，接口给到的数据是value值；
Element-ui el-cascader不能校验
热门推荐
qq_39425322的博客
01-21 1万+
本人问题已解决，例子如下： 第一步 &lt;el-form&gt; &lt;el-form-item label="区域：" prop="areaName"&gt; &lt;el-cascader          :options="options"          change-on-select          v-model="areaName"        
el-cascader级联校验不通过
qq_33911541的博客
05-15 881
el-cascader级联校验不通过
el-cascade 编辑无法通过FormRules规则验证 & 设置的回显默认值下拉显示不正常
hj
06-16 1610
1，第一个是验证不通过 el-cascade 做的省市区县村的地区联动，在编辑页面提交时，明明有值也提示为空，改一下赋值的方式即可解决。 原先的赋值方式为： this.editForm.region = [row.state,row.city,row.area,row.street,row.village]; 修改为： this.$set(this.editForm,'region',[row.state,row.city,row.area,row.street,row.village]) .
elementui el-cascader表单校验不生效
打工人的博客
03-29 1055
elementui el-cascader表单校验不生效。
ElementUI 级联选择器的el-cascader校验
canyi8023的博客
12-03 2078
<el-form-item label="类别" prop="number"> <el-cascader v-model="newData.number" :options="typeChoose" :props="{ expandTrigger: 'hover', checkStrictly: true,value: 'id', label: 'name'}" > </el-cascader&g.
el-cascader、多级嵌套、引用组件等表单验证
宁
11-17 2011
element ui表单验证
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交的数据准确无误。以下是对这些规则配置的详细说明： 1. **类型验证**： - `string`：验证字段的值必须是字符...
Vue element-ui父组件控制子组件的表单校验操作
10-15
当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户输入进行验证，确保数据的完整性和准确性。 总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
总结起来，使用Element-UI和Vue.js解决表格内表单验证问题，需要理解`el-form`和`el-form-item`的绑定机制，以及如何动态生成`prop`属性。通过正确地配置数据模型和验证规则，可以轻松实现复杂表单的验证，提高用户...
element-ui部分表单组件的必填校验问题
weixin_43550562的博客
08-29 2762
element-ui必填校验
element下拉框/级联选择器弹窗校验相关问题记录
qq_54089372的博客
03-30 1462
element下拉框/级联选择器弹窗校验相关
el-form自定义规则后表单验证validate不生效的问题
weixin_61570458的博客
09-21 3054
错误示范
Element UI 表单验证规则动态失效问题
a1137588003的博客
09-14 1410
Element 版本：v2.15.3。
element的Cascader默认选中，0不生效解决方法
lmp5023的博客
04-09 2350
在el-cascader中加入v-model可以默认选中， 但是当options里的value = 0的时候，是没自动选中的， 解决方法：把value和selectedOptions都转成字符串，因为他是区分整形和字符串的
以element-ui为例，rules校验如何在行内写
06-08
对于element-ui的表单校验，我们通常是在rules属性中定义校验规则，然后在表单组件中绑定这些校验规则。如果需要在行内写校验规则，可以通过$refs属性获取表单组件的引用，然后在需要校验的地方手动调用校验方法进行校验。 以下是一个示例代码，展示了如何在行内写element-ui的表单校验规则： ```html <el-form ref="myForm" :model="formData" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name" :class="{ 'is-invalid': $refs.myForm && $refs.myForm.fields.name && $refs.myForm.fields.name.validateMessage }"></el-input> <span v-if="$refs.myForm && $refs.myForm.fields.name && $refs.myForm.fields.name.validateMessage" class="error-message">{{ $refs.myForm.fields.name.validateMessage }}</span> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age" :class="{ 'is-invalid': $refs.myForm && $refs.myForm.fields.age && $refs.myForm.fields.age.validateMessage }"></el-input> <span v-if="$refs.myForm && $refs.myForm.fields.age && $refs.myForm.fields.age.validateMessage" class="error-message">{{ $refs.myForm.fields.age.validateMessage }}</span> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 在上面的代码中，我们在el-input组件中使用:class绑定了一个判断条件，当该条件为真时，会为该组件添加一个is-invalid类，从而使组件变红显示错误状态。同时，我们在el-input组件下方添加了一个span元素，用于显示校验错误信息。 接着，在submitForm方法中，我们通过$refs属性获取了表单组件的引用，并手动调用了validate方法进行校验。如果校验通过，则执行表单提交操作；否则，返回错误信息。 ```javascript methods: { submitForm() { this.$refs.myForm.validate((valid) => { if (valid) { // 表单校验通过，执行提交操作 } else { // 表单校验未通过，显示错误信息 this.$message.error('表单填写有误，请检查后重试！'); } }); }, }, ``` 需要注意的是，由于是在行内写校验规则，因此我们需要手动控制错误信息的显示和隐藏。在上面的代码中，我们使用了v-if指令来根据校验结果动态显示或隐藏错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值