针对elementUI input框验证非空或者必填项问题（输入之后还在报错）

最新推荐文章于 2024-05-06 11:36:32 发布
最新推荐文章于 2024-05-06 11:36:32 发布
阅读量1.8w 收藏 27
点赞数 8
分类专栏： elementUI input非空验证 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42046442/article/details/109647194
版权

看了好几篇博客，啰里啰唆的不简明     我就整理一下，方便节省大家时间

首先表单验证是用到 rules属性   （需要在data中定义或者单个的话直接写在后面就行）    我这里是在data中定义了一个formRule数组 ，因为我需要验证多个input 

 

这是定义的formRule数组 ，一定要注意formRule中的属性名字跟update_data中的属性名字一致，不然就会出现input输入之后还报错的现象

 

附加提示一下  required   是否必填      trigger    触发条件 （blur  是失去焦点触发      change  是数据改变触发）

 

 

 

 

 

小凯丶在成长的小白
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue element table中自定义一些input的验证操作
10-15
主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决html input验证只能输入数字,不能输入其他的问题
08-29
下面小编就为大家带来一篇解决html input验证只能输入数字,不能输入其他的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue使用Element-UI进行表单非空验证
qq_41581180的博客
06-15 1万+
Vue使用Element-UI进行表单非空验证 当当当！前端韭菜中的韭菜第一次写博客啦嘻嘻(__) ，感谢各位大佬的批评指正！ 产生问题 在公司实习项目的时候遇到的一个bug，需要给表单增加下图所示的提示语效果 分析问题 一开始的需求是在表单输入框失去焦点的时候进行验证，后来在对校验下拉选择器是否为空的时候遇到的一些问题（点击下拉选择器的箭头但是不进行选择，然后在空白处点击发现没有校验效果，后来醒悟过来本来就不应该进行校验，被自己蠢哭！)，就决定在进行按钮提交的时候进行验证，而不在输入框失去焦点的时候进行
使用elementUI中表单组件时检验是否为空的功能
Zrf2191318455的博客
12-01 700
使用表单收集数据时，点击提交后检验必填项是否为空是一个很重要的功能，当使用了elementUI后这个问题就变的很简单了。对于简单的事情也是需要学习一遍才能掌握运用，在这里我将会用直白明了的话来为大家讲解"使用elementUI中表单组件时检验是否为空的功能"的详细运用。"required"是HTML表单元素中的一个属性，也可以在一些前端框架（如Vue.js）的表单验证规则中使用。"trigger"是表单验证规则中的一个属性，用于指定触发验证的事件。"message"属性用于指定在验证失败时显示的错误消息。
elementUI 非表单格式的校验
qq_35946021的博客
07-13 1477
关键代码 clearValidate 方法清除校验。在普通表单中对输入框、选择框都有校验案例。但是在自定义非空中如何进行校验官网并没有说明。
el-input设置必填提示（单个&多个）
song_song0927的博客
12-26 1万+
el-input设置必填
elementui的输入框设置为必填的代码
weixin_35756130的博客
01-04 3350
使用 element-ui 的输入框，可以在绑定的 v-model 中使用 required 来设置输入框为必填。 示例代码如下： <template> <el-input v-model="value" placeholder="请输入" required></el-input> </template> <script> expo...
elementui中form表单input必填以及显示/隐藏小红星星
进无止进
06-08 1万+
elementUI中form表单input必填，显示/隐藏红色星号
Element-ui自定义input框非空校验
qq_41238459的博客
01-02 979
element-ui自定义input框非空校验
循环出来的el-input非空验证失效解决方法
半兽先生的博客
05-05 623
这样的代码，循环绑定的，我们可以利用:rules="getRules(item)"解决。
详解elementUI中input框无法输入的问题
11-21
最近发现别人项目中在输入密码的时候发现input框无法输入进去 ...到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这了,更多相关element input无法输入内容请搜索软件开发网以前的文章或继续浏览下面
正则表达式解决input框固定输入值得格式(金额,特殊字符)
01-18
在写输入用到input的时候，经常出现以下几种情况： 只能输入某。栗子：只能输入数字，只能输入字母（大写，小写）只能输入某固定格式。栗子：只能输入金额，只能输入小数且最多保留2位不能输入某。栗子：不能输入...
elementui表单非空验证坑
weixin_45759839的博客
05-23 3862
表单验证时的错误 验证非空表单时明明输入框里有东西，但仍出现错误提示 代码如下： <template> <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> <el-form-item label="username" prop="nameRule"> <el-input v-model="ruleForm.name"/> </e
element-ui el-input / el-select输入框的非空校验
热门推荐
lx233
12-17 1万+
一、之前写的实现 直接js判断就可以 .prevent .stop 是阻止继续冒泡 不一样的 见 官方说明 1https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C 2 自定义 （我没看）https://...
elementUI vue 编辑中的input的验证残留清除
sinat_38888531的博客
03-22 615
当使用编辑的时候, 假如上次的验证没通过, 报红了, 下次再点击编辑的时候还会报红,因此要清除验证残留, 方式有两种: this.$refs["from"].resetFields(); //移除校验结果并重置字段值 this.$refs["from"].clearValidate(); //移除校验结果 ref=“form” 对应 this.$refs.form -----------form 在新窗口页面打开的时候调用 示例： <el-form ref="form" :model=".
element-UI-----vue表单非空验证
weixin_45458830的博客
11-24 975
三个注意点：el-form-item上设置prop属性。最后在方法里面判断，如果为空就return。el-form上绑定rules。data里面写验证规则。
el-input输入框加上红色星号必填验证
滕青山博客
03-09 6625
vue文件: <el-form-item label="姓名：" prop="name"> <el-input v-model="form.name" minlength="1" /> </el-form-item> js文件: data() { return { rules: { name:[{required: true, message: '请输入姓名', trigger: 'blur'}] }
Elementui el-input 输入框校验以及校验表单校验
weixin_44597209的博客
05-20 6266
Elementui el-input 输入框校验以及校验表单校验常用的 element-ui el-input 输入框`/^[1-9]\d*$/正则表达式代表意思` 常用的 element-ui el-input 输入框 过滤字母e，在js中属于数字，但是正则表达式 \d 是拦不住字母e 的 . 只能输入正整数 <el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromC
VUE el-table复选框全部勾选以及勾选回显
最新发布
weixin_44443380的博客
05-06 237
【代码】VUE el-table复选框全部勾选以及勾选回显。
elementui 中input 设置为数字必填项
04-26
您可以通过设置 input 组件的 type 属性为 number，然后在表单验证时判断输入值是否为空或NaN 来实现数字必填项。同时，还可以使用 elementui 提供的表单验证规则来简化开发。例如： ```html <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="数字必填项"> <el-input v-model.number="form.number" placeholder="请输入数字"></el-input> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { number: null }, rules: { number: [ { required: true, message: '请输入数字', trigger: 'blur' }, { type: 'number', message: '请输入有效的数字', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过，提交数据 console.log(this.form.number) } else { // 表单验证失败 console.log('验证失败') } }) } } } </script> ``` 这样，在用户输入数字时，如果为空或不是数字，表单验证就会提示错误信息，从而实现数字必填项的逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值