vue 限制el-input输入1-365的正整数

最新推荐文章于 2025-04-27 20:45:00 发布

是小张吖~

最新推荐文章于 2025-04-27 20:45:00 发布

阅读量1.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_56272227/article/details/127748053

版权

本文介绍了一种使用Vue.js中的el-input组件限制用户输入范围的方法，确保输入值仅能为1到365之间的正整数，并通过自定义事件处理函数实现了对输入内容的有效验证。

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

背景：

限制el-input输入指定天数，默认为空，可输入1-365的正整数

代码实现：

<template>
    <div>
        <el-input v-model = "timeRange" :minlength="1" :maxlength="3" @change="handleValueChange" onkeyup=" value = value.replace(/[^\d||/.]/g,'')"></el-input>
    </div>
</template>

<script>
export default {
    data () {
        return {
            timeRange: null
        }
    },
    methods: {
        handleValueChange (value) {
            console.log(value)
            if (value) {
                value = value.replace(/[^\d]/g, '')
            }
            // 限制输入1-365
            if (value <= 1) {
                this.timeRange = 1
            } else if (value > 365) {
                this.timeRange = 365
            }
            // 针对为两位数时个位数是否为0做处理
            if (value.length === 2) {
                const arr = value.split('')
                if (arr[0] === '0') {
                    this.timeRange = arr[1]
                }
            }
            console.log(this.timeRange)
        }
    }
}
</script>
<style scoped>
</style>