elementUI 表单项自定义校验设置必填项required的问题

最新推荐文章于 2024-06-07 11:55:10 发布
最新推荐文章于 2024-06-07 11:55:10 发布
阅读量4.8k 收藏 8
点赞数 4
分类专栏： 个人笔记 文章标签： elementui vue.js javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37406045/article/details/128805192
版权

使用elementUI的表单校验有时需要用到默认校验和自定义校验的组合规则，比如下面这种部分表单项需要根据其他非input内容是否为空进行校验。

最低0.47元/天 解锁文章
Koen_Lee
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
element ui表单必填_elementUI 表单校验切换必填和非必填
weixin_39795116的博客
01-12 2590
需求描述消息类型为跳转外部链接的时候，活动地址为必填项，否则为非必填项消息类型为跳转外部链接 消息类型为其他 如果使用elementUI 的表单验证rules来校验的话，经过测试，elementui在组件初始化后校验规则就定型了，切换是没有效果的 解决方案第一步：去掉"活动地址”中rules校验的规则，即target 第二步：在“活动地址”的form-item上添加required属性 第三步：计...
详解ng-alain动态表单SF表单项设置必填和正则校验
01-21
在使用动态表单时对表单项进行非空校验及正则校验。 使用手机号进行校验，示例如下： 动态表单的基本使用：https://ng-alain.com/form/getting-started/zh 基于基本示例，增加手机号必填与正则校验的例子： @...
【已解决】el-form required 提示英文改中文
程序边界
06-09 6055
文章目录 最近发现 el-form 的 el-form-item 配置 required 之后 提示是英文，类似 “xxx is required”： <el-form-item required>...</el-form-item> 即使是表单验证或是自定义校验规则，只要有在标签上设置的required，就会或是在 不经意间 出现英文提示。。。 正确做法： 去掉标签上设置的required； 使用 rules 上的 required 设置： data() { retur
el-form-item 使用 required 属性改变自定义校验文字
最新发布
weixin_49031367的博客
06-07 148
在使用el-form-item过程中遇到使用required属性，默认文字提示值为 XXX is required。
VUE使用el-ui关于el-form-item使用required的英文提示问题（VUE专题一）
weixin_40690763的博客
06-03 6160
在vue的<el-form> 标签中，<el-form-item > required属性，会出现英文提示，这个时候需要自定义rules，写对应的需要校验的字段，如果没有使用rules定义，会提示英文提示，这个时候只需要自己写校验，然后在<el-form-item >标签上的 prop属性去掉，则英文提示就不在提示 ...
element form表单循环校验（动态绑定的数据)
我总是词不达意的博客
08-26 3044
element-ui form表单组件在vue的v-for中循环校验及校验规则设置以及prop的设置
ElementUI 表单 rules 规则
普罗旺斯
08-23 1万+
function验证器，可以为指定字段自定义验证函数：function(rule, value, callback, source, options)rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称value：当前校验字段的值callback：校验结束的回调函数，不管判定成功或者失败，必须调用。
ElementUI中el-form组件的rules参数详解
changwen17的博客
02-16 6941
ElementUI中el-form组件中rule规则详细介绍
ng-alain动态表单设设置置必必填填和和正正则则校校验
11-23
详解ng-alain动态表单SF表单项设置必填和正则校验。在使用动态表单时对表单项进行非空校验及正则校验
vue elementUI 表单校验功能之数组多层嵌套
10-16
在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证。然而，当表单数据涉及到数组内的对象，如上述示例所示： ```json { "title...
jQuery自动添加表单项的方法
10-23
主要介绍了jQuery自动添加表单项的方法,涉及jquery中append方法动态添加表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
element-ui表单验证
wjw_de_java的博客
12-28 93
element-ui表单验证 官方介绍： 自定义校验：validator 然后在data（）中定义方法实现自定义方法 在提交时验证from表单：
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
vue elementui required
qq_27806371的博客
06-20 263
vue elementui required是干啥的
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 4万+
日常开发中输入框正则校验大全-------持续更新维护中.......
el-form表单根据不同条件下校验是否必填
weixin_44692296的博客
01-13 6408
在项目开发过程中难免会有，在某个条件下表单必填，马讴歌条件下不检验是否必填，具体代码如下： // An highlighted block <el-form ref="formInfo" :model="searchForm" label-width="100px"> <el-form-item label="金额：" prop="payOut" :rules="flag ? rules.payOut : []"> <el-input v-mod
elementUI一条el-form-item控制两个必填项
qq_41346332的博客
01-11 2148
element-ui 一个props控制多个必填项
Vue + ElementUI 动态设置表单必填属性
阿友友的博客
03-11 7512
最近要实现一个动态设置表单必填属性的需求。如图， 当审核结果是通过的时候，可以不填写审核意见进行提交。而如果审核结果是驳回的时候则必须填写审核意见才能提交。 第一个想法就是建两个一样的el-form-item，一个有rules，一个没有，然后通过v-if控制显隐。 <el-form-item label="审核意见" v-if="testForm.checkResult!='1'"> <el-input type="textarea" v-model="
element表单提交跳转到未输入的input框
qq_45279574的博客
03-18 851
element表单提交跳转到未输入的input框 这里我直接引用element表单提供的源码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inp
elementui表单的动态校验，require是动态的
04-28
elementui是一个基于Vue.js的组件库，提供了丰富的UI组件和常用的功能组件，其中表单组件是非常实用的。而表单的动态校验，也是表单中常用的一个功能，elementui提供了灵活且方便的动态校验方式，其中require是一种动态的校验方式。 require校验方式用来判断表单是否必填，即必须填写才能提交表单。elementui中，可以通过给校验规则添加require属性来实现该功能，例如： ``` <el-form :model="formData" :rules="formRules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="formData.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> ``` ``` export default { data() { return { formData: { name: '', age: null }, formRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit success'); } else { alert('validate fail'); return false; } }); } } } ``` 在上述代码中，表单中的“姓名”和“年龄”均被设置为必填项，添加了required属性。在点击提交按钮时，调用了validate方法进行表单校验，该方法会根据规则数组中的属性来进行校验，如果校验通过则弹出提交成功的提示，否则弹出校验失败的提示。 可以看出，elementui的表单动态校验确实非常方便，提高了开发效率，同时也保证了表单的数据可靠性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Koen_Lee

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

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

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

打赏作者

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

抵扣说明：

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

余额充值