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

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

相关内容

热门资讯

安卓双系统添加应用,轻松实现多... 你有没有想过，你的安卓手机里可以同时运行两个系统呢？听起来是不是很酷？想象一边是熟悉的安卓系统，一边...
pipo安卓进系统慢,探究pi... 最近是不是发现你的Pipo安卓系统更新或者运行起来特别慢？别急，今天就来给你好好分析分析这个问题，让...
怎样使用安卓手机系统,安卓手机... 你有没有发现，安卓手机已经成为我们生活中不可或缺的一部分呢？从早晨闹钟响起，到晚上睡前刷剧，安卓手机...
双系统安卓安装caj,轻松实现... 你有没有想过，你的安卓手机里装上双系统，是不是就能同时享受安卓和Windows系统的乐趣呢？没错，这...
安卓使用ios系统教程,安卓用... 你是不是也和我一样，对安卓手机上的iOS系统充满了好奇？想要体验一下苹果的优雅和流畅？别急，今天我就...
安卓系统gps快速定位,畅享便... 你有没有遇到过这样的情况：手机里装了各种地图导航软件，但每次出门前都要等上好几分钟才能定位成功，急得...
安卓手机系统更新原理,原理与流... 你有没有发现，你的安卓手机最近是不是总在提醒你更新系统呢？别急，别急，让我来给你揭秘一下安卓手机系统...
安卓系统通知管理,全面解析与优... 你有没有发现，手机里的通知就像是一群调皮的小精灵，时不时地跳出来和你互动？没错，说的就是安卓系统的通...
安卓系统手机哪买,揭秘哪里购买... 你有没有想过，拥有一部安卓系统手机是多么酷的事情呢？想象你可以自由安装各种应用，不受限制地探索各种功...
安卓系统 ipv4,基于安卓系... 你知道吗？在智能手机的世界里，有一个系统可是无人不知、无人不晓，那就是安卓系统。而在这个庞大的安卓家...
目前安卓是什么系统,探索安卓系... 亲爱的读者，你是否曾好奇过，如今安卓系统究竟是什么模样？在这个科技飞速发展的时代，操作系统如同人体的...
安卓6.0系统比5.0,从5.... 你有没有发现，自从手机更新了安卓6.0系统，感觉整个人都清爽了不少呢？没错，今天咱们就来聊聊这个话题...
安卓2.36系统升级,功能革新... 你知道吗？最近安卓系统又来了一次大变身，那就是安卓2.36系统升级！这可不是一个小打小闹的更新，而是...
安卓系统源码怎么打开,并可能需... 你有没有想过，安卓系统的源码就像是一扇神秘的门，隐藏着无数的技术秘密？想要打开这扇门，你得掌握一些小...
安卓8.0系统体验视频,智能革... 你有没有听说安卓8.0系统最近可是火得一塌糊涂啊！作为一个紧跟科技潮流的数码达人，我当然要来给你好好...
宣传系统漫画app安卓,探索安... 亲爱的读者们，你是否曾在某个午后，百无聊赖地打开手机，想要寻找一些轻松愉悦的读物？今天，我要给你介绍...
鸿蒙替换安卓系统吗,开启智能生... 你知道吗？最近科技圈里可是炸开了锅，因为华为的新操作系统鸿蒙系统，据说要大举进军手机市场，替换掉安卓...
手机安卓系统深度清理,解锁手机... 手机里的东西是不是越来越多，感觉就像一个装满了杂物的储物柜？别急，今天就来教你一招——手机安卓系统深...
安卓上的windows系统,融... 你有没有想过，在安卓手机上也能体验到Windows系统的魅力呢？没错，这就是今天我要跟你分享的神奇故...
安卓系统焦点变化事件,Andr... 你知道吗？在安卓系统的世界里，最近发生了一件超级有趣的事情——焦点变化事件。这可不是什么小打小闹，它...