vue3 antd项目实战——input输入框限制输入内容和长度，Form表单动态校验规则
创始人
2024-05-02 01:12:44
0次

input输入框设置只能输入中文，输入长度为20，输入不能为空

  • 知识调用
  • 场景复现
  • 解决方案
    • 1.下方有提示文字
    • 2.限制输入内容只能是中文
    • 3.限制输入长度为20
    • 4.动态校验规则（必填项）
  • input源代码（按需调整即可）

知识调用

文章中可能会用到的知识链接
vue3+ant design vue+ts实战【ant-design-vue组件库引入】🔥🔥
js限制input输入框只能输入数字、字母等组合的正则表达式
vue3 antd项目实战——table表格（一文带你快速实现后台管理系统最常用的table表格）🔥🔥

场景复现

在vue + ant design vue搭建的后台管理系统中，input输入框随处可见，关于input组件的需求也是五花八门。本期文章将以项目中的实例需求为例，详细介绍实现方案。

初始状态：
在这里插入图片描述

input输入框需求：

  • 只能输入中文
  • 中文字符最多20个
  • 下方有提示文字
  • 必填项，为空时有提示文字

解决方案

文章继续沿用以往的ant design vue UI组件库（点击移步官方文档）。分四个步骤分别实现四个需求。
基础代码：

在这里输入框显然是要嵌套在表单里的。我们先双向绑定输入框的内容，设置初始样式。

1.下方有提示文字

这个相对而言比较简单，直接在input标签后添加p标签存放文字，css定位过去即可。

请在此处输入不超过20个中文字符

实现效果：
在这里插入图片描述

2.限制输入内容只能是中文

上期文章中我们分享过js中用于限制输入内容的正则表达式，刚好在这里派上用场。

在标签中写入以下内容：

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" 
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

在这里插入图片描述
实现效果：
输入英文等其他字符无效
在这里插入图片描述
输入中文字符有效
在这里插入图片描述

3.限制输入长度为20

在标签中添加以下内容

maxLength='20'

在这里插入图片描述
实现效果：
在这里插入图片描述

4.动态校验规则（必填项）

利用ant design vue官方文档中Form表单API中的rules，双向绑定动态校验规则。
在这里插入图片描述
在标签中添加以下内容：

:rules="[{required: true, message: '名称不能为空'}]"

在这里插入图片描述
实现效果：
在这里插入图片描述

input源代码（按需调整即可）

请在此处输入不超过20个中文字符
后续将不定期持续更新相关内容~
觉得这篇文章有用的小伙伴们
可以点赞➕收藏➕关注哦~
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Educational Codeforces Round 99 (Rated for Div. 2) D. Sequence and Swaps

下一篇：软件测试内容的要点

相关内容

热门资讯

麦飞系统和安卓,引领智能时代新... 你有没有想过，手机里的那些应用，是怎么知道你的喜好，给你推荐你感兴趣的内容的呢？今天，就让我带你一探...
安卓系统装电脑系统教程,畅享多... 你有没有想过，把安卓系统装到电脑上，是不是就像给电脑换了个新衣裳，瞬间变得时尚又实用呢？没错，今天就...
安卓系统怎么找地址,一触即达 你是不是在安卓手机上找地址时犯了难？别急，今天就来给你详细讲解让你轻松找到心仪的地点！一、地图应用导...
黑客版的安卓系统,安全性如何？ 亲爱的读者，你是否曾想过，如果安卓系统被一群黑客高手重新打造，会变成什么样呢？今天，就让我们一起揭开...
ios系统怎么备份到安卓系统,... 你是不是也有过这样的烦恼：手机里的照片、视频、联系人等重要数据，突然想换到安卓系统，却不知道怎么备份...
安卓系统怎么关java,And... 你是不是也和我一样，有时候在使用安卓手机的时候，突然发现Java进程在后台默默运行，占用着宝贵的系统...
康佳电视安卓系统3.0,深度解... 你有没有发现，家里的康佳电视最近变得聪明多了？没错，它升级到了安卓系统3.0，这可不仅仅是换了个壳，...
安卓系统桌面自动排序,提升效率 你有没有发现，你的安卓手机桌面上的图标有时候会自动排序，是不是觉得有点神奇呢？今天，就让我来带你一探...
安卓系统需要c 吗,C语言在关... 你有没有想过，你的安卓手机里那个神秘的C语言，它到底是不是你的手机里的“隐形英雄”呢？今天，我们就来...
索尼安卓4.4系统下载,探索全... 你有没有发现，最近你的索尼手机有点儿落伍了？别急，别急，我来告诉你一个好消息——索尼安卓4.4系统下...
各安卓系统大小变化,系统大小演... 你知道吗？随着科技的发展，手机操作系统也在不断地更新迭代。今天，我们就来聊聊安卓系统的大小变化，看看...
安卓车机专用系统,智能驾驶新体... 你有没有发现，现在汽车界也开始玩起了高科技？没错，我说的就是安卓车机专用系统。想象当你驾驶着爱车，一...
安卓系统优酷目录,海量视频资源... 你有没有发现，现在手机上安装了安卓系统的，几乎都离不开优酷这个视频平台呢？它就像一个巨大的宝藏库，里...
安卓系统录音电话,记录生活点滴 你有没有想过，在手机上录音电话竟然也能变得如此有趣和实用呢？没错，就是那个我们每天不离手的安卓系统，...
怎么强刷安卓系统,安卓系统强刷... 你有没有想过，你的安卓手机是不是已经有点儿“老态龙钟”了呢？运行速度慢、卡顿，甚至有时候还会出现一些...
安卓平板改变系统空间,安卓平板... 你有没有发现，你的安卓平板最近有点儿“胖”了呢？别担心，这可不是什么坏事，而是因为你的系统空间正在悄...
安卓最高系统推荐机型,揭秘最高... 你有没有想过，拥有一部搭载最新安卓系统的手机，那感觉简直就像拥有了未来的钥匙？没错，今天就要来聊聊这...
小狼君 安卓系统日常,小狼君带... 你知道吗？在这个科技飞速发展的时代，手机已经成为了我们生活中不可或缺的好伙伴。而今天，我要给你讲一个...
老游戏移植安卓系统,重温往日情... 你有没有发现，那些曾经陪伴我们度过无数时光的老游戏，现在竟然也能在安卓系统上畅玩啦！是不是有点小激动...
摩看app安卓系统,畅享移动观... 亲爱的手机控们，今天我要和你聊聊一个在安卓系统里悄悄崛起的小家伙——摩看app。你可能没听过它，但别...