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

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

相关内容

热门资讯

安卓系统自带的网页,功能与特色... 你有没有发现，每次打开安卓手机，那熟悉的系统界面里总有一个默默无闻的小家伙——安卓系统自带的网页浏览...
美咖云系统安卓版,开启智能生活... 你有没有发现，最近手机上多了一个叫“美咖云系统安卓版”的小家伙？它就像一个魔法师，轻轻一点，就能让你...
安卓系统推荐最好的手机,盘点性... 你有没有想过，拥有一部性能卓越的手机，就像是拥有了移动的宝藏库？在这个信息爆炸的时代，一部好手机不仅...
安卓11系统能精简吗,释放潜能 你有没有发现，随着手机越来越智能，系统也越来越庞大？安卓11系统，这个最新的操作系统，是不是也让你觉...
安卓自动重启系统软件,揭秘原因... 手机突然自动重启，是不是感觉整个人都不好了？别急，今天就来和你聊聊这个让人头疼的安卓自动重启系统软件...
苹果手机x刷安卓系统,探索安卓... 你有没有想过，你的苹果手机X竟然也能刷上安卓系统？是的，你没听错，就是那个一直以来都和我们苹果手机X...
安卓系统智商低吗,智商低下的真... 你有没有想过，为什么安卓系统的智商总被调侃得好像有点低呢？是不是觉得它总是慢吞吞的，有时候还犯点小错...
安卓系统手机联系人,揭秘你的社... 你有没有发现，手机里的联系人列表就像是一个小小的社交圈呢？里面藏着我们的亲朋好友、工作伙伴，甚至还有...
安卓系统免费铃声下载,打造个性... 手机里那首老掉牙的铃声是不是让你觉得有点out了呢？别急，今天就来给你支个招，让你轻松给安卓手机换上...
安卓系统用哪个桌面好,打造个性... 你有没有发现，手机桌面可是我们每天都要面对的“脸面”呢？换一个好看的桌面，心情都能跟着好起来。那么，...
虚拟大师是安卓10系统,功能与... 你知道吗？最近在手机圈里，有个新玩意儿引起了不小的轰动，那就是虚拟大师！而且，更让人惊喜的是，这个虚...
安卓系统与苹果优缺点,系统优缺... 说到手机操作系统，安卓和苹果绝对是两大巨头，它们各有各的特色，就像两道不同的美味佳肴，让人难以抉择。...
安卓win双系统主板,融合与创... 你有没有想过，一台电脑如果既能流畅运行安卓系统，又能轻松驾驭Windows系统，那该有多爽啊？没错，...
安卓系统可精简软件,轻松提升手... 你有没有发现，手机里的安卓系统越来越庞大，软件也越装越多，有时候感觉手机就像个“大肚子”，不仅运行速...
安卓系统基于linux的代码,... 你有没有想过，那个陪伴你每天刷抖音、玩游戏、办公的安卓系统，其实背后有着一套复杂的基于Linux的代...
苹果和安卓的拍照系统,谁更胜一... 你有没有发现，现在手机拍照已经成为我们生活中不可或缺的一部分呢？无论是记录生活的点滴，还是捕捉美丽的...
苹果和安卓系统不同吗,系统差异... 你有没有想过，为什么你的手机里装的是苹果的iOS系统，而朋友的手机却是安卓系统呢？这两种系统，看似都...
安卓系统有多少级,揭秘其多级架... 你有没有想过，那个陪伴我们日常生活的安卓系统，它其实有着丰富的层级结构呢？没错，就是那个让我们的手机...
华为鸿蒙系统与安卓的,技术融合... 你知道吗？最近科技圈可是炸开了锅，华为鸿蒙系统与安卓的较量成为了大家热议的话题。这不，今天我就来给你...
什么安卓手机是苹果系统,搭载苹... 你有没有想过，为什么有些人宁愿花大价钱买苹果手机，而有些人却对安卓手机情有独钟呢？其实，这个问题背后...