vue3表单校验 正则-只允许输入英文大小写、数字

最新推荐文章于 2025-05-24 16:51:05 发布
最新推荐文章于 2025-05-24 16:51:05 发布
阅读量3k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue3 antd 正则 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/131801984
该内容描述了用户名的输入要求，必须是5-10位的数字或大小写字母组成，并且在输入时会进行blur和change事件触发的正则匹配验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 username: [
        { required: true, message: '用户名不能为空' },
        {
          message: '请输入5-10位数字或大小写字母组成的用户名',
          pattern: /^[a-zA-Z0-9]{5,10}$/,
          trigger: ['blur', 'change'],
        },
      ],

 

Vue+elementUl表单正则验证（验证手机号，邮箱，密码）
吴小花的博客
12-15 2982
效果： 需求： 给form表单增加，手机号，邮箱，密码验证规则 代码实现： Form 组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可。 <!-- 弹出的编辑框 --> <el-dialog :title="editingStatus === 'editing' ? '编辑高校信息' : '新增高校信息'" width="700px...
vue3中设置页面只支持英文输入法
foreverhui的博客
12-15 1079
vue3中只支持英文输入法
解决vue中监听input只能输入数字及英文或者其他情况的问题
10-18
今天小编就为大家分享一篇解决vue中监听input只能输入数字及英文或者其他情况的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 el-input 只能输入数字
最新发布
往事知多少？
05-24 267
设置 el-input 的 type 属性为 number 来限制输入数字。
input输入框输入只能输入数字、字母等组合的正则表达式
热门推荐
xiaohong的博客
12-11 2万+
1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式： <input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 2.限制input输入框只能输入小写字母、数字、下划线的正则表达式： <input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 3…限制input
使用正则限制输入框只能输入英文和数字
ju_vlog的博客
04-20 2006
numberAndEnglish() { // this.formData.insuredIdn 是输入框v-model双向绑定的数据 this.formData.insuredIdn = this.formData.insuredIdn.replace(/[^\a-\z\A-\Z0-9]/g, ''); },
form表单 正则判断只能输入英文、数字、下划线、横杠、中文
zlzbt
04-23 599
【代码】form表单 正则判断只能输入英文、数字、下划线、横杠、中文。
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项_vue rules 正则
2401_84413180的博客
04-27 1189
data() {}̲;return …|^\d*.\d+$/, message: ‘请输入数字/小数点’, trigger: ‘blur’ },},],},},pattern: /]+![\̲d̲!@#]+$/,message: ‘请输入大/小写字母+数字+特殊字符’,},if (value == ‘测试’) {callback(new Error(‘名字不能是测试!
【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性
Sabrina_cc的博客
07-18 4170
本文主要总结elementUI 中el-form的表单校验，手机号，邮箱，密码，并且提供了异步校验手机号唯一性的方法。
vue-form-craft，基于vue3的开箱即用表单方案
xinnian66aa的博客
02-28 2689
首先祝各位朋友们新年快乐！龙年大吉！在前端开发过程中，表单渲染是重要且繁琐的一环。为了提高开发效率并避免重复工作，我开发了一款基于vue3的表单工具，并取名vue-form-craft（vue表单工艺）。是适用于vue3项目中后台表单的一种通用解决方案。本文将介绍 vue-form-craft 的基本概念、使用方式及高级特性。主要由FormDesign（表单设计器）和SchemaForm（表单渲染器）组成。FormDesign通过拖拽快速生成JsonSchema，SchemaForm。
vue3 input输入框输入限制（数字）
从兄的博客
05-25 1726
输入框限制输入的内容格式，如（金额，数字）金额限制小数点后2位数。
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
11-29
本文实例讲述了JavaScript控制输入框中只能输入中文、数字和英文的方法。分享给大家供大家参考，具体如下： 1、问题背景： 遇到这样一个问题：有一个输入框，要求只能输入中文、数字和英文（即过滤特殊字符串） 2、JS代码： function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElementById("username").value.trim(); //判断输入框中有内容 if(!
正则表达式，只能输入数字，英文 ，+， -，*，/，()
m0_46329256的博客
09-17 1074
求大佬帮忙
vue3表单参数校验+正则表达式
nameofworld的博客
04-04 4694
这里我们要实现注册页在form表单中对表单项添加参数校验。我们的表单中有用户名、密码、电话号码、邮箱这四个项。要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。对页面进行数据绑定。在el-form标签上通过rules属性，绑定校验规则，在el-form-item标签上通过prop属性，指定校验项。
正则限制input框只能输入数字,英文等
Roger★L☆M☆J★
08-13 2114
 常用HTML正则表达式      1.只能输入数字和英文的：             onbeforepaste="clipboardData.setData(text,clipboardData.getData(text).replace(/[^/d]/g,))"       ID="Text1" NAME="Text1">      2.只能输入数字的：      
【vue】正则表达式限制input的输入：
SunPeng的博客
12-12 4599
【vue】正则表达式限制input的输入：
vue3 输入框限制输入只能数字并保留两位小数
xiaozhangnomoney的博客
04-29 3023
需求是输入框输入只能输入5位数并且保留两位小数,最大不超过99999,好久没有写过前端,一个方法连搜带问写了两个小时,记录一下 输入框 <input v-model="xxxxxx" type="text" @input="valueChange" /> 方法 const valueChange = (e : any) => { console.log('=
vue elementui el-input 正则验证，限制只能输入数字和小数
Z18834071903的博客
06-07 1666
vue elementui el-input 正则验证，限制只能输入数字和小数
input输入框使用正则限制为数字、英文及中文，出现吞字符问题
Turn_to_empty的博客
03-17 1508
正则表达式限制为数字、英文及中文
el-input只能输入数字和&#39;NA&#39;通过正则规则在输入时就校验怎么实现
12-27
### 实现 `el-input` 组件仅限输入数字和 &#39;NA&#39; 为了使 `el-input` 组件能够接受仅数字或特定字符串 `&#39;NA&#39;` 的输入，可以通过定义一个合适的正则表达式来验证用户的输入。该正则表达式的构建应考虑两种情况： - 输入全部由数字组成。 - 或者输入正好是大小写不敏感的字符串 `"NA"`。 满足上述条件的一个可能方案如下所示[^1]： ```javascript // 定义用于检验输入合法性的正则表达式 const validInputPattern = /^(?:\d+|NA)$/i; ``` 此模式解释为： - `^`: 断言位置处于字符串起始处； - `(?:...)`: 非捕获组，用来组合子表达式而不创建回溯边界； - `\d+`: 表示一位或多位于数字符； - `|`: 或运算符，在这里表示前面的部分(`\d+`)与后面部分(&#39;NA&#39;)之间选择其一； - `NA`: 字面量匹配单词 "NA"； - `/i`: 忽略大小写的标志位，使得大写或小写字母都能成功匹配； - `$`: 断言位置处于字符串结束处； 当应用于 Vue.js 和 Element UI 库中的 `el-input` 控件时，可以在组件属性里设置 `v-model` 双向绑定变量，并利用表单验证功能配合自定义规则来进行实时校验[^2]。 下面是一个完整的例子展示如何将这个逻辑集成到实际项目中去： ```html <template> <el-form :model="formInline" :rules="rules"> <el-form-item prop="inputValue"> <el-input v-model.trim="formInline.inputValue"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formInline: { inputValue: &#39;&#39; }, rules: { inputValue: [ { validator(rule, value, callback) { const pattern = /^(?:\d+|NA)$/i; if (!pattern.test(value)) { callback(new Error(&#39;请输入有效数值或 NA&#39;)); } else { callback(); } }, trigger: [&#39;blur&#39;, &#39;change&#39;] } ] } }; } }; </script> ``` 在这个实例中，每当用户尝试提交含有非法字符的数据时，都会触发错误提示信息告知他们重新输入有效的数据形式——即纯数字序列或是固定的两个英文字母组成的字符串 `&#39;NA&#39;`。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值