element ui from 表单添加必填的星号但是不进行校验

最新推荐文章于 2024-02-29 14:25:46 发布
最新推荐文章于 2024-02-29 14:25:46 发布
阅读量4.5k 收藏 12
点赞数 12
分类专栏： vue element ui form表单 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tion1992/article/details/125553849
版权
vue 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
element ui
2 篇文章 0 订阅
订阅专栏
form表单
2 篇文章 0 订阅
订阅专栏

方法1：
在 el-form-item 上添加 required 或 :required=“true” 并去掉 prop 属性
但这种方法有时会无效（无效原因不知道）

<el-form-item label="测试" :required="true">
  这是测试代码
</el-form-item>

在这里插入图片描述
方法2：
在 el-form-item 上添加 class=“is-required”
这种办法原理只是修改样式，跟功能无关

<el-form-item label="测试" class="is-required">
  这是测试代码
</el-form-item>

在这里插入图片描述

飞天老公猪
关注
  • 12
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
elementui中form表单input必填以及显示/隐藏小红星星
进无止进
06-08 1万+
elementUI中form表单input必填，显示/隐藏红色星号
解决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 default { data()
form表单设置了rules，但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验。form表单验证失败问题
最新发布
weixin_63896561的博客
02-29 403
可见：类名为bodyInfo_ctn的div下有两个div子元素（两个div内均有el-form表单），分别使用v-if去判断显示form表单的。那么我们只给“子元素一”下的form表单加了两项表单验证，但是发现我们将这两项清空并且失焦时，却没有触发表单校验，只有label的红色星号，但是没有进行实际的表单验证并提示,见下图：大概意思就是说，有相同父元素的子元素，如果v-if和v-else的元素类型相同，最好使用key属性绑定每个子元素。
Vue项目中elementUI表单部分验证validateField以及星号显示等问题
qq_44308109的博客
12-28 9095
一、红色必填星号 红色星号不显示，可能是没有正确填写prop和字段名称，检查一遍 有验证规则但不想加红色星号，可以在el-form标签上加 ：hide-required-asterisk=“true” 当没有添加验证规则，但又要加上红色星号，可以在el-form-item标签上加 ：required=“true” 二、填写后某些表单项仍然有错误提示，用validateField（prop）重新验证 <el-form :model="ruleForm" :rules="rules" re
element form表单label前面加红星，但是不验证
u013361179的博客
05-26 3259
element form表单label前面加红星，但是不验证
详解element-ui中表单验证的三种方式
10-16
主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui form必填项显示红色星号但不触发校验
小猫爪子
05-27 6331
封装的form组件 父组件传rules,必填项显示红色星号但不触发校验 dataForm和表单加载item对应项必须相同，我一开始顺序ip和datasource顺序写反了 × dataForm: { ip: '', datasource: '', port: '', username: '', password: '', databaseName: '', version: '' }, √ dataForm: { datasource: '', ip: '', port: '',
关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决
cabinx的博客
10-09 5615
关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决 1.问题描述： vue项目中使用ElementUI的表单form校验单的时候，按照校验规则进行输入，但是一直校验不通过，问题如下图： 2.解决方案： 出现上述问题的根本原因竟然是：v-model与:model的区别问题（v-model： 通常用于input的双向数据绑定，但它并不会向子组件传递数据。:model： 表示绑定自定义属性，它只是将父组件的数据传递给子组件，但没有实现父组件和子组件数据之间的双向
antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法
agua001的博客
04-11 4752
antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法
vue element-ui 进行表单校验时自定义校验规则 没有小星星，显示英文校验提示
ClamJ092的博客
11-22 8020
之前遇到了一个小问题，就是要自定义校验规则，但是加上了自定义校验规则之后，左上角的小红星星不显示了，按照网上的说法在element ui 元素上加了required，又遇到了新问题，在输入数据，一点一点删掉之后，下边的提示竟然出现了校验默认的英文。 直接上正确代码，再总结问题 <el-form-item label="软件名称" prop="softwareName"> ...
vue：el-form-item lable设置无校验的必填标识
Bug_MK的博客
11-17 2736
List item vue笔记 el-form-item lable设置无校验的必填标识 <el-col :span="8"> <el-form-item label="手机号码" prop="phone"> // 这里放入 label slot 进行自定义 <label slot="label"><span style="color:red">*</span>&nbsp;&nbsp;手机号码</label> .
yii去掉必填项中星号的方法
12-18
本文实例讲述了yii去掉必填项中星号的方法。分享给大家供大家参考，具体如下： 如何去掉必填项里的星号呢？ 先分析下代码实现： public function labelEx($model,$attribute,$htmlOptions=array()) { return CHtml::activeLabelEx($model,$attribute,$htmlOptions); } public static function activeLabelEx($model,$attribute,$htmlOptions=array()) { $realAttribute=$attribut
element-ui vue 表单校验
12-21
element-ui vue 表单校验
vue中使用element-ui进行表单验证的实例代码
08-27
主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
详解element-ui设置下拉选择切换必填和非必填
10-16
主要介绍了详解element-ui设置下拉选择切换必填和非必填，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
主要介绍了element-ui 表单校验 Rules 配置 常用黑科技，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
element UI 表单组件必填项前的小红星控制
sinat_33255495的博客
12-21 7067
form 表单加验证 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inpu
关于v-if会导致Element Ui表单中下拉框验证红星不会消失问题
qq_40611592的博客
10-26 1370
关于v-if会导致Element Ui表单中下拉框验证红星不会消失问题发现问题问题原因解决办法总结 发现问题 elementui 表单 通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 但实际上我碰到一种选择下拉框验证（其它比如输入框正常），选中值后不消失的问题，奇怪的是点击表单确定后它就消失了。 问题原因 找了无数种原因，包括单独写验证，标签里面写验证，一个字母字母对照。。。最后 大佬同事帮我看过后，终于找到了原因。因为我要用不同的选择来渲染
element-ui表单必填校验
07-25
element-ui中的form表单校验可以通过以下步骤实现： 1. 在form表单中添加需要校验的表单项，例如： ``` <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> </el-form> ``` 2. 在data中定义form和rules对象，例如： ``` data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } } ``` 3. 在methods中定义submit方法，例如： ``` methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交操作 } else { // 表单校验不通过，提示错误信息 } }); } } ``` 4. 在submit按钮中调用submit方法，例如： ``` <el-button type="primary" @click="submit">提交</el-button> ``` 以上就是element-ui中form表单校验的基本步骤。需要注意的是，校验规则可以根据实际情况进行自定义，例如添加正则表达式校验等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值