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

最新推荐文章于 2025-05-24 16:51:05 发布
原创 最新推荐文章于 2025-05-24 16:51:05 发布 · 3.1k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

该内容描述了用户名的输入要求，必须是5-10位的数字或大小写字母组成，并且在输入时会进行blur和change事件触发的正则匹配验证。 
 username: [
        { required: true, message: '用户名不能为空' },
        {
          message: '请输入5-10位数字或大小写字母组成的用户名',
          pattern: /^[a-zA-Z0-9]{5,10}$/,
          trigger: ['blur', 'change'],
        },
      ],

 

Vue+elementUl表单正则验证（验证手机号，邮箱，密码）
吴小花的博客
12-15 3015
效果： 需求： 给form表单增加，手机号，邮箱，密码验证规则 代码实现： Form 组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可。 <!-- 弹出的编辑框 --> <el-dialog :title="editingStatus === 'editing' ? '编辑高校信息' : '新增高校信息'" width="700px...
解决vue中监听input只能输入数字及英文或者其他情况的问题
10-18
今天小编就为大家分享一篇解决vue中监听input只能输入数字及英文或者其他情况的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3中设置页面只支持英文输入法
foreverhui的博客
12-15 1238
vue3中只支持英文输入法
【vue】正则表达式限制input的输入：
SunPeng的博客
12-12 4798
【vue】正则表达式限制input的输入：
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 2038
numberAndEnglish() { // this.formData.insuredIdn 是输入框v-model双向绑定的数据 this.formData.insuredIdn = this.formData.insuredIdn.replace(/[^\a-\z\A-\Z0-9]/g, ''); },
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项_vue rules 正则
2401_84413180的博客
04-27 1279
data() {}̲;return …|^\d*.\d+$/, message: ‘请输入数字/小数点’, trigger: ‘blur’ },},],},},pattern: /]+![\̲d̲!@#]+$/,message: ‘请输入大/小写字母+数字+特殊字符’,},if (value == ‘测试’) {callback(new Error(‘名字不能是测试!
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
热门推荐
BMG-Princess
04-09 3万+
最全最全正则验证 + 表单验证 + 注意事项 一、正则验证 1.输入字母/数字/下划线： 2.请输入中英文/数字/下划线： 3.请输入中文/英文： 4.规范金额： 5.用户名不能全是数字: 6.中文： 7.非中文： 8.限制长度： 9.数字： 10.正整数及整数： 11.请输入数字(可正负) 12.请输入数字/小数点: 13.请输入0-9999 14.大写，小写，数字，特殊字符，至少上面的三种,至少八位 15.自定义校验 16.是否合法IP地址: 17.是否手
element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；手动校验表单某一项；手动清空表单的某一项校验结果
i_am_a_div的博客
08-31 1641
一、基本属性认知： 1. required: true 会有 * ， 但仅是触发最后点击提交按钮时，校验某一项位必填；与输入事件或者选择或者失焦时候 怎么校验无关 （这时候的校验取决于是否写了具体的校验规则） 为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示 2. validator: 自定义校验方法 需要声明变量和错误提示 3. trigger: 触发校验方法 4. message: 错误提示 5.
form表单 正则判断只能输入英文、数字、下划线、横杠、中文
zlzbt
04-23 658
【代码】form表单 正则判断只能输入英文、数字、下划线、横杠、中文。
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(!
vue3 el-input 只能输入数字
往事知多少？
05-24 423
设置 el-input 的 type 属性为 number 来限制输入数字。
vue3 input输入框输入限制（数字）
从兄的博客
05-25 1960
输入框限制输入的内容格式，如（金额，数字）金额限制小数点后2位数。
正则表达式，只能输入数字，英文 ，+， -，*，/，()
m0_46329256的博客
09-17 1100
求大佬帮忙
vue3表单参数校验+正则表达式
nameofworld的博客
04-04 5150
这里我们要实现注册页在form表单中对表单项添加参数校验。我们的表单中有用户名、密码、电话号码、邮箱这四个项。要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。对页面进行数据绑定。在el-form标签上通过rules属性，绑定校验规则，在el-form-item标签上通过prop属性，指定校验项。
正则限制input框只能输入数字,英文等
Roger★L☆M☆J★
08-13 2130
 常用HTML正则表达式      1.只能输入数字和英文的：             onbeforepaste="clipboardData.setData(text,clipboardData.getData(text).replace(/[^/d]/g,))"       ID="Text1" NAME="Text1">      2.只能输入数字的：      
vue3项目表单校验实时输入的内容，只能输入数字
weixin_69677630的博客
02-17 396
【代码】vue3项目表单校验实时输入的内容，只能输入两位小数的数字。
vue3 输入框限制输入只能数字并保留两位小数
xiaozhangnomoney的博客
04-29 3110
需求是输入框输入只能输入5位数并且保留两位小数,最大不超过99999,好久没有写过前端,一个方法连搜带问写了两个小时,记录一下 输入框 <input v-model="xxxxxx" type="text" @input="valueChange" /> 方法 const valueChange = (e : any) => { console.log('=
vue elementui el-input 正则验证，限制只能输入数字和小数
Z18834071903的博客
06-07 1779
vue elementui el-input 正则验证，限制只能输入数字和小数
vue3 表单填写姓名时，英文姓名应该有什么正则校验
最新发布
09-04
<think> 首先，用户的问题是关于在Vue 3表单中对英文姓名进行正则校验的方法。他们引用了几个站内引用，但这些是关于其他字段的校验，比如用户名、端口号和手机号。我需要基于这些引用，结合用户的需求，提供英文姓名的正则校验方法。 关键点： - 用户引用了三个引用：[^1] 是关于如何添加prop属性到el-form-item进行校验；[^2] 和 [^3] 是关于正则表达式的示例（端口号和手机号）。 - 用户明确说：“上述引用仅供参考，并不是用户真正的需求”，所以我不能直接复制，而是要适应英文姓名的场景。 - 用户需求：在Vue 3表单中对英文姓名进行正则校验。 我的回答需要： - 使用中文回答（系统指令）。 - 结构清晰，帮助用户逐步解决问题。 - 确保回答真实可靠。 - 所有行内数学表达式用$...$，独立公式用$$...$$（但由于是正则表达式，可能不需要数学公式，除非涉及数学）。 - 生成相关问题（系统指令要求）。 - 在回答中引用的段落末尾自然地添加引用标识，比如[^1]。 结构思考： 1. **理解英文姓名的正则校验**：英文姓名通常允许字母、空格、连字符、撇号等，例如 "John Smith", "Mary-Jane O&#39;Brien"。常见的正则表达式可能像 `/^[A-Za-z\s&#39;-]+$/` 来匹配这些字符。 - 需要验证：只允许字母、空格、连字符（-）、撇号（&#39;）。 - 确保名字不能为空。 - 在Vue 3中，使用Element Plus表单校验（从引用中看，用户提到了el-form-item，所以可能是使用Element UI的Element Plus库）。 2. **基于引用的适配**： - 引用[^1] 描述了如何在el-form-item中添加prop属性来指定校验项。 - 引用[^2] 和 [^3] 给出了正则表达式的例子，我应该参考它们的形式来创建英文姓名的正则。 - 用户使用了Element Plus（从el-form-item等标签看出），所以回答应该基于Vue 3和Element Plus。 3. **逐步回答**： - 步骤1: 解释英文姓名的正则表达式模式。 - 步骤2: 展示如何在Vue 3表单中实现校验，包括定义规则和使用prop。 - 步骤3: 提供代码示例。 - 确保引用标识：在描述时，自然地添加引用到相关部分。 4. **生成相关问题**：在结尾添加相关问题，如“如何自定义错误消息？”、“如何处理国际化姓名？”等。 正则表达式设计： - 英文姓名：典型的模式是允许大写和小写字母、空格、连字符、撇号。 - 例子：`/^[A-Za-z\s&#39;-]+$/` - `^` 表示开头。 - `[A-Za-z]` 字母。 - `\s` 空格。 - `&#39;` 撇号（注意转义）。 - `-` 连字符。 - `+` 一个或多个。 - `$` 结尾。 - 可能需要处理最小长度和最大长度，但用户没指定，所以我假设基本校验。 在Vue 3中实现： - 使用Element Plus的Form组件。 - 定义rules对象，包含validator或pattern。 - 应用到el-form-item。 代码示例： - 类似于引用[^1]的结构。 - 例如： ```html <el-form :model="form" :rules="rules"> <el-form-item prop="fullName" label="英文姓名"> <el-input v-model="form.fullName"></el-input> </el-form-item> </el-form> ``` ```javascript import { reactive } from &#39;vue&#39;; export default { setup() { const form = reactive({ fullName: &#39;&#39; }); const rules = reactive({ fullName: [ { required: true, message: &#39;请输入英文姓名&#39;, trigger: &#39;blur&#39; }, { pattern: /^[A-Za-z\s&#39;-]+$/, message: &#39;请输入有效的英文姓名&#39;, trigger: &#39;blur&#39; } ] }); return { form, rules }; } }; ``` 添加引用标识： - 当提到prop属性时，参考引用[^1]。 - 当提到正则表达式时，参考引用[^2]和[^3]的形式。 生成相关问题： - 基于主题，如： 1. 如何添加姓名长度校验？ 2. 如何处理带有特殊字符的姓名？ 3. 如何集成前端校验和后端校验？ 最终回答结构： 1. 介绍英文姓名正则校验的基本概念。 2. 提供详细步骤和代码示例。 3. 添加引用标识。 4. 列出相关问题。 </think> ### Vue 3 表单英文姓名的正则校验方法 在 Vue 3 中，对英文姓名进行正则校验通常结合 Element Plus 表单组件（如 `el-form` 和 `el-form-item`）实现。英文姓名的常见规则包括： - 仅允许字母（大小写）、空格、连字符（`-`）和撇号（`&#39;`），例如 "John Smith" 或 "Mary-Jane O&#39;Brien"。 - 禁止数字、特殊符号（如 `@`, `#` 等）。 - 可添加长度限制（如 2-50 字符）。 以下是分步实现方法： #### 步骤 1: 定义正则表达式 英文姓名的正则表达式可设计为： ```javascript /^[A-Za-z\s&#39;-]+$/ ``` - `^` 匹配字符串开头，`$` 匹配结尾。 - `[A-Za-z]` 匹配所有大小写字母。 - `\s` 匹配空格（例如姓和名的分隔）。 - `&#39;-` 匹配连字符和撇号（需注意转义）。 - `+` 确保至少有一个字符。 - 可添加长度限制：`/^[A-Za-z\s&#39;-]{2,50}$/`（表示 2 到 50 个字符）[^2]。 #### 步骤 2: 在 Vue 3 中配置表单校验 基于 Element Plus 的表单校验规则： 1. **定义表单数据和校验规则**：在 Vue 组件中，使用 `reactive` 定义表单数据对象，并设置 `rules` 对象包含正则校验。 2. **绑定到模板**：在 `el-form-item` 上通过 `prop` 指定校验项（参考引用[^1]）。 ```vue <template> <el-form :model="formData" :rules="rules"> <el-form-item label="英文姓名" prop="fullName"> <!-- 通过 prop 指定校验项 --> <el-input v-model="formData.fullName" placeholder="例如：John Smith" /> </el-form-item> </el-form> </template> <script setup> import { reactive } from &#39;vue&#39;; const formData = reactive({ fullName: &#39;&#39;, // 表单数据 }); const rules = reactive({ fullName: [ { required: true, message: &#39;姓名不能为空&#39;, trigger: &#39;blur&#39; }, // 必填校验 { pattern: /^[A-Za-z\s&#39;-]+$/, // 正则表达式 message: &#39;请输入有效的英文姓名（仅允许字母、空格、连字符或撇号）&#39;, trigger: &#39;blur&#39; // 触发时机：输入框失去焦点时校验 }, // 可选：添加长度限制 { min: 2, max: 50, message: &#39;姓名长度需在 2 到 50 个字符之间&#39;, trigger: &#39;blur&#39; } ] }); </script> ``` #### 关键说明： - **正则表达式优化**：如果需支持国际化姓名（如带重音符号），可扩展为 `/^[\p{L}\s&#39;-]+$/u`（需浏览器支持 Unicode）。 - **校验触发**：`trigger: &#39;blur&#39;` 表示输入框失去焦点时触发校验；也可设为 `&#39;change&#39;` 实现实时校验。 - **错误提示**：`message` 属性自定义错误信息，提升用户体验（参考引用[^2]）。 - **兼容性**：Element Plus 的校验规则与 Vue 3 的响应式系统无缝集成。 #### 注意事项： - 实际项目中，建议结合后端校验确保数据安全。 - 测试极端案例，如空输入、特殊符号等，确保正则覆盖边界条件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值