vue项目固定文字和输入框的组合表单输入

已于 2023-06-14 09:11:41 修改
阅读量2.3k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： #前端组件库 文章标签： vue.js 前端 javascript elementui html
于 2023-06-12 11:44:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liu__yuan/article/details/131132451
文章展示了如何在Vue前端项目中利用Element-UI和Vant组件实现一种半输入模式，即结合固定文字和输入框来减少用户输入，提高效率。当用户选择不同城市时，公司名称的输入格式会相应变化，例如在北京市和上海市情况下，会有不同的前缀和后缀。代码示例分别给出了PC端和移动端的实现方式。

        在做前端vue项目的时候，有时为了减少用户的输入时间，开发者会将某些格式固定的表单输入项进行优化，方法就是通过组合固定文字和输入框来尽可能地减少用户的输入字数，进而减少输入时间，先上效果图吧：

        上面就是根据单选框的值来切换公司名称的输入格式，这种固定文字和输入框的组合我姑且称之为半输入模式。下面是具体的前端代码（包括PC端和移动端）实现：

一、PC端（使用element-ui组件）

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3 - 实现禁止input输入框禁止输入空格，textarea、input表单禁止输入空格不允许用户提交空格，vue3 input输入框禁止用户输入空格（el-input、a-input组件库）
🏆 前端领域优质创作者
10-22 4170
vue3如何实现input输入框禁止输入空格，vue3怎么让textarea禁止输入空格，支持Element Plus、Ant Design Vue，el-input输入框禁止输入空格，vue3 input表单禁止输入空格_input输入框不允许输入空格，vue3 H5页面input框禁止输入空格限制，怎么彻底限制input输入框禁止用户输入空格，不允许空格出现在输入框内而不是提交时去掉，antd输入框组件不允许用户输入框，vue3从根本限制输入不会让空格打出来，微信公众号网页H5禁止用户输入空格，inpu
Vue：实现输入框/选择列表内容更改，页面实时预览多个内容变化
qq_46119575的博客
06-22 5601
在各种前端页面中，比如用户信息注册的页面，往往有多个输入框和多个选项列表。为了避免用户选错或者输入错误，可以在前端页面上实时将多个输入框的内容拼接起来，显示到页面或者弹出的窗口中，帮助用户核对、检查输入的内容是否有错，提高用户体验。本文介绍了在 Vue 中如何实现用户输入多个内容或者选择多个选项列表，与多个内容拼接起来显示到页面上，实现实时预览的效果。
Vue - 表单输入绑定详解
学无止境
12-30 1643
在Web开发中，表单是用户与应用程序交互的重要方式之一。Vue.js 提供了强大的表单输入绑定机制，使得在处理用户输入时变得更加简洁和高效。本篇博客将深入探讨 Vue.js 中表单输入绑定的各种用法，包括文本输入、多行文本、复选框、单选按钮、下拉选择框、多选框，以及修饰符的使用。
《Vant 移动端 Vue 组件库的使用》
yk_ddm的博客
12-28 1022
目录Vant 移动端 Vue 组件库的使用案例demo Vant 移动端 Vue 组件库的使用 轻量、可靠的移动端 Vue 组件库 案例demo van-form Form 表单的使用
Vue基础-输入文本框
weixin_72492001的博客
08-11 4592
Vue基础-输入文本框
vue el-input输入框设置固定前缀字符串
qq_634380940的博客
07-05 997
el-input输入框设置固定前缀字符串
Vue ElementUI实现:限制输入框只能输入正整数的问题
10-15
在Vue ElementUI框架中，有时我们需要对用户输入进行限制，例如仅允许输入正整数。以下将详细介绍如何实现这一功能。 ### 方法一：利用禁止按键的方法 这种方法通过监听`keyup`事件来阻止用户输入减号 `-` 和...
精选资源
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
vue 表单输入框不支持focus及blur事件的解决方案
01-21
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): ... 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () ...
vue+element UI 实战点击按钮添加一组输入框
qq_44811609的博客
12-29 5554
点击添加实验组 ，添加一组输入框,点击减号删除一组输入框 <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button> <div class="form" v-show="dialogForm" v-for="(item,index) in List" :key=...
vue文本输入框（textarea）
热门推荐
JEFF_xieyuzhi的博客
03-24 2万+
源码： <template> <div> <headers title="新建记录"></headers> <div class="text-area"> <textarea placeholder="请输入记录评语..."> </textarea> &lt...
Vue ElementPlus 组件 Input 输入框
小楼一夜听春雨，深巷明朝卖杏花
03-31 2443
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。不支持 v-model 修饰符。可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。使用show-password属性即可得到一个可切换显示隐藏的密码框。使用clearable属性即可得到一个可清空的输入框。input 为受控组件，它总会显示 Vue 绑定值。带有图标标记输入类型。
【Vue3 Element UI - Plus + Tyscript 实现Tags标签输入及回显】
qq_45973421的博客
03-06 1895
是一个常见的功能需求。用户可以通过输入框添加标签，并通过关闭按钮删除标签，同时还需要支持标签数据的提交和回显。本文将详细介绍如何使用。通过以上实现，我们完成了动态标签的添加、删除、提交和回显功能。用户可以通过输入框添加新标签，并通过关闭按钮删除标签。希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区留言讨论~在编辑表单时，需要从接口获取已保存的标签数据并回显到页面上。在开发后台管理系统或表单页面时，渲染标签列表，并使用。动态标签的核心是通过。字段随表单一起提交。
吐得了，vue的多选组合框回显必须是字符串集合
weixin_30315435的博客
08-09 225
下面这个typeIdList，如果给他赋值，就能回显到页面，但是必须是字符串的集合，如果是数值类型的id，不好意思，请转成字符串 转载于:https://www.cnblogs.com/LcxSummer/p/9450823.html...
VUE+table表格里面嵌套输入框：
zhu_tian_huan的博客
05-19 2093
table表格里面加输入框
vue3 实现一个简单的输入框
不想起床
02-29 3088
需要一个输入框，可以输入文字，添加表情，一开始用了**富文本编辑器**，有点大材小用，所以自己封装一个输入框组件。支持输入文字，选择表情/插入表情，支持组合键换行，使用enter
element-vue 如何在文本框后添加文字
George_huhu的博客
12-08 1万+
vue-element 文章目录vue-element前言一、怎么做？1.示例代码2.结果图片 前言 在我们设计前端页面时，总会使用input输入框，当你要输入某些固定单位时，如何在输入框后固定单位呢？。 一、怎么做？ 1.示例代码 代码如下（示例）： <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="公里数" prop="cMile"
iview 引入组件 并 input框 固定显示 文本
weixin_44747789的博客
06-30 768
首先移植是这个组件，但这个组件并不支持搜索功能。 因此希望自己重新写一个组件 支持首字母及搜索功能. 基础知识准备： 组件使用的三个步骤 1.创建组件构造器 调用vue.extend（）方法 2.注册组件 调用 vue.componet()方法 3.使用组件 注意要作用范围内 ...
实现 input框前有固定文字并且文字焦点向右对齐
weixin_48338881的博客
01-12 1986
实现 input框前有固定文字并且文字焦点向右对齐
vue 表单校验 输入框只能输入正整数
最新发布
11-09
<think>我们正在处理用户的需求：在Vue中实现表单校验，使输入框只能输入正整数。 根据用户提供的引用，我们可以总结出几种方法： 方法1（引用[2]）：在el-input标签上使用oninput事件，通过正则表达式替换非数字字符。 示例代码：<el-input ... oninput="value=value.replace(/[^\d]/g,'')" ...> 方法2（引用[3]）：利用@blur事件在输入框失去焦点时处理，但示例中没有给出具体正则，我们可以结合正则表达式来实现。 方法3：使用Vue的表单验证规则（rules）来校验输入是否为正整数。 另外，用户要求输入正整数，所以我们不仅要限制非数字字符，还要注意不能输入0和负数。但是，上述引用中的方法主要过滤了非数字字符，并没有过滤0。因此，我们需要进一步处理。 考虑到用户使用的是Element UI，我们可以结合使用事件处理和表单验证规则。 下面我们将提供两种常用的实现方式： 方式一：通过事件处理（实时过滤） 在输入过程中，我们限制只能输入数字，并且当输入0时，我们可以将其替换为空（因为正整数不能以0开头，且0不是正整数），但注意类似'10'这样的数字，第二位是0是允许的，所以不能简单地把0都去掉。因此，我们可以在输入时过滤非数字字符，然后在失去焦点时检查数值，如果小于1则置为空或最小值1。 方式二：使用表单验证规则（在提交或校验时检查） 这种方式不会实时限制输入，而是在表单提交或字段校验时触发，给出错误提示。 根据用户的需求，我们可能需要实时限制输入，所以推荐方式一。 但是，注意引用[2]中的方法会过滤掉非数字字符，但允许0和负数吗？实际上，正则表达式`/[^\d]/g`会过滤掉非数字字符（包括负号和小数点），所以不会出现负号和小数点，但会允许0。因此，我们需要额外处理0。 我们可以这样调整： 1. 在oninput事件中，我们过滤非数字字符，并且如果第一个字符是0，则将其替换为空（因为正整数不能以0开头，除非是0本身，但0不是正整数，所以整个输入框不允许输入0）。 2. 但是，如果用户输入的是多位数字，比如10，那么第一个字符是1，第二个字符是0，这是允许的。所以不能简单地在输入时删除所有的0。 因此，我们可以只考虑在输入第一个字符时，如果输入0则不允许。但这样处理会破坏用户输入多位数字（比如输入10时，先输入1，再输入0，这是允许的）。 另一种思路：在输入时只允许输入数字，然后在失去焦点时检查数值，如果数值小于1则清空或置为1。 下面我们分别实现： 方案A（输入时过滤非数字，失去焦点时调整数值）： ```vue <template> <el-form :model="form"> <el-form-item label="正整数" prop="positiveInteger"> <el-input v-model="form.positiveInteger" @input="handleInput" @blur="handleBlur" placeholder="请输入正整数"> </el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { positiveInteger: '' } }; }, methods: { handleInput(value) { // 过滤非数字字符 this.form.positiveInteger = value.replace(/[^\d]/g, ''); }, handleBlur() { // 失去焦点时，如果值不为空且小于1，则置为空或1 if (this.form.positiveInteger) { const num = parseInt(this.form.positiveInteger); if (num < 1) { this.form.positiveInteger = ''; } } } } }; </script> ``` 方案B：使用表单验证规则（在规则中检查正整数） ```vue <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="正整数" prop="positiveInteger"> <el-input v-model="form.positiveInteger" placeholder="请输入正整数"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { // 验证正整数的规则 const checkPositiveInteger = (rule, value, callback) => { if (!value) { return callback(new Error('不能为空')); } // 使用正则表达式检查是否为正整数 const reg = /^[1-9]\d*$/; if (reg.test(value)) { callback(); } else { callback(new Error('请输入正整数')); } }; return { form: { positiveInteger: '' }, rules: { positiveInteger: [ { validator: checkPositiveInteger, trigger: 'blur' } ] } }; } }; </script> ``` 方案C：结合两者（输入时过滤非数字，同时使用验证规则确保为正整数） 这样既实时过滤，又能在提交时校验。 根据用户的引用，他们可能更倾向于实时过滤，所以我们重点展示方案A和方案B。 另外，引用[2]中使用了type="number"，但注意，在HTML5中，input[type=number]允许输入负数和小数，所以我们需要避免使用type="number"，而是使用type="text"，然后通过正则过滤。 注意：使用type="number"时，浏览器会提供上下箭头，但用户仍然可以输入负号和小数点（在有些浏览器中不允许输入非数字字符，但为了安全，我们还是自己控制）。 因此，我们推荐使用type="text"，然后通过方案A或方案B。 总结： 如果希望实时过滤并且不允许输入非正整数，可以使用方案A（输入时过滤非数字，失去焦点时检查最小值）。 如果希望使用Element UI的表单验证功能，可以使用方案B（在规则中使用正则表达式校验）。 下面我们详细说明方案B中的正则表达式： 正则表达式：`/^[1-9]\d*$/` 解释： ^: 字符串开始 [1-9]: 第一位必须是1-9的数字（不能是0） \d*: 后面跟着0个或多个数字（0-9） $: 字符串结束 这个正则表达式可以匹配1, 2, ..., 10, 11, ... 等正整数，不会匹配0，小数，负数。 注意：方案B在输入过程中不会阻止用户输入非数字字符，但在失去焦点时会给出错误提示（因为trigger设置为'blur'）。如果需要实时校验，可以将trigger改为'change'或'input'，但这样可能会频繁触发错误提示（比如用户还没输入完时就提示错误）。 因此，我们更推荐方案A和方案B结合：即输入时过滤非数字字符（避免用户看到非数字字符出现），失去焦点时进行校验（确保是正整数，且大于0）。同时，如果需要表单验证（例如提交时整体校验），也可以加上规则。 改进后的方案： 方案D（推荐）： ```vue <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="正整数" prop="positiveInteger"> <el-input v-model="form.positiveInteger" @input="handleInput" placeholder="请输入正整数"> </el-input> </el-form-item> </el-form> </template> <script> export default { data() { // 验证正整数的规则 const checkPositiveInteger = (rule, value, callback) => { if (!value) { return callback(new Error('不能为空')); } const reg = /^[1-9]\d*$/; if (reg.test(value)) { callback(); } else { callback(new Error('请输入正整数')); } }; return { form: { positiveInteger: '' }, rules: { positiveInteger: [ { validator: checkPositiveInteger, trigger: 'blur' } ] } }; }, methods: { handleInput(value) { // 过滤非数字字符，并更新绑定值 this.form.positiveInteger = value.replace(/[^\d]/g, ''); } } }; </script> ``` 这样，在输入时，我们过滤掉非数字字符（包括负号和小数点），然后在失去焦点时进行校验（确保是正整数）。 注意：在输入时，我们允许输入0，但会被过滤掉吗？注意，过滤非数字字符后，0是允许保留的（因为0是数字）。但是在校验规则中，我们的正则要求第一位必须是1-9，所以如果用户输入0，那么校验规则会报错。因此，我们需要在输入时也处理0的问题吗？ 实际上，在输入时，我们只过滤了非数字字符，所以用户仍然可以输入0，例如： 用户输入0 -> 过滤后变成0（因为0是数字），然后校验规则会提示错误（因为0不是正整数）。 如果我们不希望用户输入0（即使是作为中间过程），那么可以在输入时处理：当输入的第一个字符是0，则将其替换为空。但这样会导致用户无法输入10（因为输入10时，先输入1，再输入0，这是允许的，但是如果我们只处理第一个字符，那么输入1时不会触发，再输入0时，整个字符串是"10"，第一个字符是1，所以允许）。但是，如果用户想要输入10，但是不小心先按了0，那么第一个0会被删除，然后用户再输入1，变成1？这样不太友好。 因此，我们不在输入时处理0的问题，而是通过校验规则来提示。这样用户输入0后，失去焦点时会提示“请输入正整数”，用户就会知道需要修改。 综上所述，方案D是比较完善的。 另外，如果我们希望输入框只能输入数字且不能以0开头（除了0本身，但0不被允许）？但是，我们不能简单地去掉开头的0，因为这样会破坏用户输入（例如，用户想要输入1024，如果我们在输入过程中将开头的0去掉，那么当用户输入0时，输入框会清空，然后用户输入1，变成1，再输入0变成10，再输入2变成102，再输入4变成1024，这是正常的。但是，如果用户输入00，会被替换成空，因为第一个0被保留，第二个0输入后字符串为"00"，然后我们如果替换开头的0？） 为了避免复杂处理，我们只做非数字字符的过滤，然后通过校验规则来限制必须是正整数（即开头不为0，且大于0）。这样，用户输入0时，在失去焦点时会得到错误提示。 因此，我们最终推荐方案D。 根据引用，用户可能使用的是Vue2或Vue3，但以上代码在Vue2和Vue3中都可以使用（Vue3中需要调整组合式API，但逻辑相同）。 下面我们根据方案D给出完整示例。 注意：在Vue3中使用Element Plus，但Element Plus的用法与Element UI类似。 如果用户使用的是Vue3和Element Plus，可以参考以下代码（与Vue2代码几乎相同，只是设置方式不同，这里以Vue2为例，因为引用中大部分是Vue2）。 最后，在回答中，我们会按照要求生成相关问题。 </think>### Vue 表单校验实现输入框只能输入正整数的方法 在 Vue 中实现输入框只能输入正整数，主要有三种实用方法，各有优缺点： --- #### 方法一：实时输入过滤（推荐） **原理**：通过 `@input` 事件和正则表达式即时过滤非法字符 **优点**：即时反馈，用户体验好 **代码示例**： ```vue <template> <el-form> <el-form-item label="数量"> <el-input v-model="quantity" @input="handleInput" placeholder="请输入正整数" /> </el-form-item> </el-form> </template> <script> export default { data() { return { quantity: '' } }, methods: { handleInput(value) { // 正则说明：过滤非数字字符，首位不允许0 this.quantity = value .replace(/[^\d]/g, '') // 移除非数字 .replace(/^0+/, '') // 移除前导零 .replace(/^(\d{10})\d+/, '$1'); // 限制最大长度 } } } </script> ``` **特性**： 1. 即时过滤非数字字符（包括负号和小数点）[^2] 2. 自动移除首位零（避免 `012` 这类非法输入） 3. 可添加长度限制（示例限制10位） --- #### 方法二：表单验证规则 **原理**：使用 Element UI 的验证规则在提交/失焦时校验 **优点**：符合表单验证规范，支持错误提示 **代码示例**： ```vue <template> <el-form :rules="rules" :model="form"> <el-form-item label="数量" prop="count"> <el-input v-model="form.count" placeholder="请输入正整数"/> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { count: null }, rules: { count: [ { required: true, message: '数量不能为空' }, { validator: (_, value, callback) => { // 正则：首位1-9，后跟0-9的整数 const reg = /^[1-9]\d*$/; reg.test(value) ? callback() : callback(new Error('请输入正整数')); }, trigger: 'blur' } ] } } } } </script> ``` **特性**： 1. 使用 `^[1-9]\d*$` 正则确保： - 首位不为零 - 无小数点 - 非负数 2. 可在 `blur` 或 `change` 事件触发验证[^3] --- #### 方法三：HTML5 输入限制（简单场景） **原理**：结合 `type="number"` 和 `min` 属性 **优点**：原生支持，无需额外逻辑 **代码示例**： ```vue <el-input v-model="quantity" type="number" min="1" step="1" oninput="validity.valid||(value='')" placeholder="请输入正整数" /> ``` **特性**： 1. `min="1"` 限制最小值 2. `step="1"` 限制步长为整数 3. `oninput` 即时清除无效值[^2] 4. **局限**：部分浏览器允许输入负号 --- ### 方法对比 | 特性 | 实时输入过滤 | 表单验证规则 | HTML5 原生限制 | |---------------------|-------------------|-------------------|------------------| | **即时反馈** | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ | | **错误提示** | 需自定义 | ⭐⭐⭐⭐⭐ | 浏览器默认样式 | | **移动端兼容性** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | | **代码复杂度** | ⭐⭐ | ⭐⭐⭐ | ⭐ | | **推荐场景** | 实时输入控制 | 表单提交验证 | 简单页面 | --- ### 关键注意事项 1. **避免使用 `type="number"` 单独使用** 可能允许输入负号和小数，需配合 `min` 和 `oninput` 使用[^1] 2. **正则表达式选择** ```js /^[1-9]\d*$/ // 标准正整数（推荐） /^\d+$/ // 允许0（不符合正整数要求） ``` 3. **处理大数问题** 添加长度限制防止 `Number` 类型溢出： ```js .replace(/^(\d{10})\d+/, '$1') // 限制10位数 ``` 4. **兼容性处理** 在移动端需额外监听 `keypress` 事件阻止非数字输入： ```js @keypress="(e) => /[^\d]/.test(e.key) && e.preventDefault()" ``` > ✅ **最佳实践**： > 推荐组合使用 **方法一（实时过滤） + 方法二（表单验证）**，既保证用户体验又确保数据有效性[^2][^3]。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【金融科技蚂蚁】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值