vue使用element-ui中的el-input，正则限制输入的内容格式

已于 2022-11-30 14:59:54 修改
阅读量929 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-11-30 14:58:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xi_aot/article/details/128115174
版权

前端开发 输入验证 正则表达式 事件监听 实时提示
关键词由CSDN通过智能技术生成

试了很多方法，最后用的下面这种方法是我个人感觉比较好的。

主要通过监听事件监听，对于一些特殊要求的输入框（正则限制）可以采用此方法。

当输入完后检查输入框中输入的内容规则是否符合要求，如果不符合就设置为空，并进行警示，因为不知道用户中途会不会输入英文字母，汉字，特殊字符等不规则字符。

以邮箱为例（其他格式是一样的道理，只需要换一下正则表达式以及输入框中的赋值）

        （1）首先是html部分：

        （2）方法部分：

 

 以上就是我的分享啦，希望对各位有所帮助

SweetsT
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性
寻思旧京洛
08-21 1万+
1. 给页面表单对象添加验证属性 由于我的项目使用的el-form,则给el-form添加属性 :rules="registerRules" ref="registerForm" 为el-form-item每个表单子项添加 prop 属性, 例如 <el-form-item prop="username"> <el-input name="username"...
vue input框输入正则限制
半梅芒果干的博客
12-29 3115
【代码】vue input框输入正则限制。
解决el-input的输入文字居中
最新发布
lookinglove1的博客
06-05 524
"/>
前端-element输入框-input的一些限制(只能输入正整数和0，或者只能输入数字不可以汉字字母)，禁止输入特殊字符等
weixin_47194802的博客
05-26 7706
那你就用 onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"那就用这个onkeyup="value=value.replace(/[^\-?\d.]/g,'')"，不能输入汉字和字母。input输入框只能输入正整数和0。如果是正数负数0，包括小数都可以。
el-input限制输入数字格式
dd_lcdw的博客
10-07 272
【代码】el-input限制输入数字格式。
element输入框el-input之格式控制
kekexiaomayi的博客
03-17 2735
element输入框el-input之格式控制
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
input的一些输入限制，正则校验只能输入数字，正则校验不能输入中文
Sunny_lxm的博客
10-17 3185
input的一些输入限制1、input输入框只能输入正整数和0；只能输入大于0的正整数；不能输入中文，可以输入正数、负数、小数和字母；如果是正数负数0，包括小数都可以；只能取到小数点后两位
vue2+element-ui可进行输入或者点击随机密码生成，密码格式：字母+数字+特殊符号，限制6位以上。
KMINLIKE的博客
10-14 508
【代码】vue2+element-ui可进行输入或者点击随机密码生成，密码格式：字母+数字+特殊符号，限制6位以上。
elementui之el-input输入框内容限制
牛先森家的博客
11-09 9403
elementui之el-input输入框内容限制汇总elementui之el-input输入框内容限制限制仅能输入数字，整数不得超过2位，小数不得超过2位限制输入数字1到3位数字（0-100） elementui之el-input输入框内容限制 限制仅能输入数字，整数不得超过2位，小数不得超过2位 <!-- --> <template> <div class="content-box"> <div class="container">
element-Ui统一修改el-input样式
前端职场小白_炜晨科技的博客
09-19 860
element-Ui统一修改el-input样式,或者可以直接在html上每个input 添加 style="width:220px"
如何修改elementui输入框的样式
~Mysunny的博客
10-30 1486
<style scoped lang="scss"> >>> .el-input__inner{ width: 30px; } </style>
Element UI el-input 标签限制输入框内容（中文，英文，邮箱，手机号）
热门推荐
qq_45845523的博客
04-06 1万+
设置限制只能输入中文 校验中文的正则：/^[\u4e00-\u9fa5]+$/ rules: { title: [ { required: true, message: "请输入中文名", trigger: "blur" }, { validator: function(rule, value, callback) { if (/^[\u4e00-\u9fa5]+$/.test(value) == f
Vue前端验证一个text只能输入手机号或邮箱
LiLi_code的博客
08-01 1890
直接上代码： element-ui 内部 text： <el-form-item prop="username"> <el-input v-model="ruleForm.username" placeholder="用户名" autofocus> </el-input> </el-form-item> 检查对象： let ...
input 限制输入内容
JRSQW的博客
02-24 524
【代码】input 限制输入内容。
element ui input框限制
snow_living的博客
08-08 286
element ui input框只能输入数字。
在vue2.0中messagebox中实现input、el-input-number输入及正则表达验证功能，
05-27
在Vue 2.0中，可以使用element-ui组件库中的MessageBox和InputNumber组件来实现带有正则表达式验证的输入框。 首先，我们需要引入element-ui组件库。在Vue项目中使用element-ui可以通过npm安装： ``` npm install ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值