vue ElementUI 表单验证输入空格

最新推荐文章于 2024-03-14 15:32:33 发布
最新推荐文章于 2024-03-14 15:32:33 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21747731/article/details/105034436
版权

element-ui中自带的表单必填项校验不能去除空格。

若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。

 <el-form-item label="模板名称" prop="template_name">
     <el-input v-model.trim="ruleForm.template_name" size="small" placeholder="请输入模板名称" maxlength="50" show-word-limit></el-input>
 </el-form-item>

扩展更多v-model绑定时可以添加修饰符：

v-model.lazy 只有在input输入框发生blur事件时才触发
v-model.trim 去除首尾空格
v-model.number 输入的字符串转换成number

小山羊~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何解决elment ui必填验证输入空格通过校验？
刘杨造梦的博客
05-27 448
使用v-model.trim修饰符，这样就会自动过滤掉首尾空白字符，如果采用trim修饰符的话，确实可以实现功能，但是这个时候首尾都不能输入空格就会导致一个问题，当我们从左到右输入文字的时候，如果需要输入的字符串中间包含空格，就会无法实现，会遇到不能输入的问题，我们只能输入完成之后再去将鼠标光标放置在字符串中间部分输入空格，这样肯定是不利于我们输入的。请求拦截器过滤所有的请求参数，对应的参数首尾空格全部去掉。同样的空格那么肯定是会通过校验的，那么我们如何去实现不让其首尾输入空格呢？// 就将数组放进去。
element-ui form 表单验证--输入空格问题
代码青春
12-29 4811
<el-form :rules="rules"> <el-form-item label="名称" prop="name"> <el-input size="small" v-model.trim="form.name" placeholder="请输入名称"></el-input> </el-form-item> </el-form> v-model.lazy 只有在input输入框发生blur事件时才触发 v-.
输入框去掉两侧空格，保留中间空格
weixin_28898107的博客
03-18 521
<el-input type="textarea" :rows="8" maxlength="200" show-word-limit :placeholder="isSubmitButton ? '请输入关键词' : '暂无'" v-model="responseForm.respo...
vue判断input输入内容全是空格的方法
08-27
下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue空格校验和特殊字符校验
qq_43610925的博客
08-13 6966
这个方法只可以校正输入框全是空格的情况，无法校正文字前中后的空格。这种方法可以校验输入框所有空格。
element-ui form rules 检验不能输入空格
m0_54991820的博客
10-13 440
【代码】element-ui form rules 检验不能输入空格。
Vue表单校验与正则表达式
c_x_m的博客
08-29 1313
Vue表单校验与正则表达式
vue elementUI 表单嵌套验证的实例代码
12-30
一：表单一级验证 element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证 客户名称: size=small prop=belongId> <el v-show=false v-model=form.belongId></el> <...
vue elementui form表单验证的实现
10-17
主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue ElementUI之Form表单验证遇到的问题
08-29
Vue ElementUI之Form表单验证遇到的问题 Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决...
element必填校验 输入空格问题，修改正则表达式、请求拦截器，实现所有输入框去除首尾空格
韩旭的博客
05-14 9952
文章目录一、element-ui,必填校验输入空格是可以通过校验的？二、解决方案?v-model.trim修饰符?三、采用pattern，手写正则的方式实现功能功能。四、请求拦截器过滤所有的请求参数，对应的参数首尾空格全部去掉。 一、element-ui,必填校验输入空格是可以通过校验的？ 我们可以看一下elemen-ui的源码， 我们可以看到其实element-ui对应el-form-item关于必填校验的部分是采用了rules,rules.length去进行的校验 我们需要知道的是其实空格也同样
vue点击页面空白处实现保存功能
10-16
主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element的form表单自定义校验注意事项一
alessia_wang的博客
02-16 445
问题：在做项目过程中，有个内容自己这边使用饿了么的自定义表单校验，在进行提交保存前的表单校验的时候，一直无法进入饿了么的校验方法中，通过排查发现是自己写的自定义表单校验产生的影响。 自定义表单的校验代码如下： 但是在提交保存的时候，下面的方法一直无法进入： 直接就跳走了 这个坑主要是自定义表单校验的时候，如果错了则要callback错误的信息，但是没有问题的时候也要返回一个空的callback 自定义校验 callback 必须被调用，且是每个分支都必须写callback！ elem
. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息
Aa12364567的博客
11-21 950
【代码】. el-input 不允许只输入空格el-table-column长度超过时隐藏显示-tooltip 将后台返回的数字0 1 2 转化为对应的文字信息。
form 表单校验 & 格式限制
smile2333的博客
07-26 473
一、vue 表单校验 字段验证 :正则表达式 1、在表单form 里 ：<el-form :rules='rules' prop="name"> 或<el-form :rules='rules' prop="name" :rules="[{ required: true, message: 'name不能为空', trigger: 'blur' }]"（可以直接写） ...
vue+element ui+表单验证空格问题
weixin_43616614的博客
11-20 2740
vue+element UI表单验证中检验空格问题 文章目录前言一、效果二、操作三、总结 前言 上传表单验证中，若输入数据为空（或者输入数据为空格），相对应的会有验证信息提示；但输入空格之后，默认数据不为空，不会提示验证信息，显然不是我们的需求。 一、效果 输入框中TAC和PCI监听不到输入的数据为空,便进行下一步操作； 二、操作 代码如下（示例）： 在数据绑定时v-model改成v-model.trim即可在前端表单添加的输入框中监听到数据是否为空或空格，当监听到时验证不能通过； 三、总结 表单操作监听
element 表单使用校验 校验失效问题
paidaboluo的博客
08-17 9656
element 表单使用校验 校验失效问题
vue form表单验证
最新发布
qq_28586135的博客
03-14 895
第三种：必填，正则验证，不能输入空格(v-model.trim)第三种：必填，正则验证，不能输入空格(v-model.trim)第二种：必填，正则验证，不能只输入空格验证。第二种：必填，正则验证，不能只输入空格验证。第一种：非必填不能为空，并且需要正则验证。第一种：非必填不能为空，并且需要正则验证。第四种：选了多选框后必填，第四种：选了多选框后必填。
vue 实现点击空白处执行方法(列表收回、隐藏等操作)
heyNewbie的博客
06-21 6552
项目中一直在用elementUI组件，但是有些需求是需要定制化开发的，不能完全的依赖组件现有功能，比如： 定制化下拉菜单，并提供带有提示标志的单选和多选等 小伙伴们相信也碰到不少这样的例子，最头疼的就是点击空白处的判定 然后就转了一篇，以防丢失 简单想应该怎么实现？ 1、肯定是给document增加一个click事件监听 2、当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现。 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只
vue 使用elementui 表单rules验证小数跟整数
09-02
在Vue中使用Element UI进行表单规则验证时，可以通过自定义验证规则来验证小数和整数。 首先，在Vue组件中引入Element UI和所需的验证规则： ``` import {Form,FormItem,Input,Button} from 'element-ui'; import {validNumber, validInteger} from '@/utils/validate'; export default { components: { 'el-form': Form, 'el-form-item': FormItem, 'el-input': Input, 'el-button': Button }, data() { return { form: { decimal: '', integer: '' }, rules: { decimal: [ { validator: validNumber, trigger: 'blur' } ], integer: [ { validator: validInteger, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 表单验证通过，提交表单 // ... } else { // 表单验证失败 return false; } }); } } }; ``` 在上述代码中，`validNumber`和`validInteger`是用于验证小数和整数的自定义验证方法，这两个方法可以根据自己的需求进行编写。例如，验证小数的方法可以是： ``` validNumber(rule, value, callback) { if (!value) { return callback(new Error('请输入内容')); } else if (!/^[-+]?([0-9]+(\.[0-9]+)?|\.[0-9]+)$/.test(value)) { return callback(new Error('请输入正确的小数')); } else { callback(); } } ``` 验证整数的方法可以是： ``` validInteger(rule, value, callback) { if (!value) { return callback(new Error('请输入内容')); } else if (!/^[1-9]\d*$/.test(value)) { return callback(new Error('请输入正确的整数')); } else { callback(); } } ``` 以上就是使用Element UI进行表单规则验证时，验证小数和整数的方法。在规则中添加相应的验证规则，并且通过自定义验证规则方法来实现对小数和整数的验证。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值