input 换行

本文介绍了一个前端实现银行卡号输入框的方法,通过HTML和JavaScript进行限制输入,只允许输入数字,并在输入时实时过滤非数字字符。同时,使用了Vue.js的数据绑定和校验规则来确保银行卡号长度在20位之间且必填,提升了用户体验。

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

效果如图 :
在这里插入图片描述
input内容换行, 主要是为了提升体验,大致实现如下:

<el-input v-model.trim="form.XXX" placeholder="请输入银行卡号" onkeyup="value = value.replace(/[^0-9]/g,'')" type="textarea" autosize maxlength="30"></el-input>
				
data里

Rule() {
			return {
				bankNumber: [
					//银行卡号
					{
						min: 0,
						max: 20,
						message: "银行卡号长度在20位之间",
						trigger: "change"
					},
					{
						required: true,
						message: "请输入",
						trigger: "blur"
					}
				]
			};
		}

::v-deep .el-textarea__inner {
	resize: none;
	line-height: normal;
	min-height: 28px !important;
	overflow-y: hidden;
}
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值