当前位置: 首页 > article >正文

naive ui 控制 n-input 只可以输入26个英文字母+数字

 <n-form-item label="编码" path="sn">
                <n-input v-model:value="form.sn" placeholder="请输入编码" :on-input="handleInput"></n-input>
            </n-form-item>
// 处理输入事件的函数
const handleInput = (value) => {
    // 定义正则表达式,只允许英文字母和数字
    const regex = /^[a-zA-Z0-9]*$/;
    if (regex.test(value)) {
        // 如果输入符合规则,更新输入框的值
        form.value.sn = value;
    } else {
        // 如果输入不符合规则,截取符合规则的部分
        form.value.sn = value.replace(/[^a-zA-Z0-9]/g, '');
    }
};

最终测试,不可以输入汉字


http://www.kler.cn/a/585869.html

相关文章:

  • 方差缩减梯度算法
  • 【嵌入式】嵌入式系统中的 SemVer 版本控制方案
  • 网络安全信息收集[web子目录]:dirsearch子目录爆破全攻略以及爆破字典结合
  • Flutter三棵树是什么,为什么这么设计
  • SpringBoot解决跨域
  • 鸿蒙app 开发 高效的 存储 数据 推荐使用 @tencent/mmkv(V2.1.0):
  • 计算矩阵边缘元素之和(信息学奥赛一本通-1121)
  • 基于Android的记事本APP设计与实现:从需求分析到功能实现(超级简单记事本,附源码+文档报告)
  • 在IDEA中连接达梦数据库:详细配置指南
  • 【论文阅读方法】沐神课程:如何读论文
  • 工程化与框架系列(33)--前端安全实践指南
  • 前端存储-indexdb封装:dexie.js的使用
  • Nodejs+MySQL数据库管理
  • 手势调控屏幕亮度:Python + OpenCV + Mediapipe 打造智能交互体验
  • 3ds Max 导入到 After Effects 还原摄像机要注意事项--deepseek
  • 掌握市场先机:9款销售渠道管理工具深度测评
  • 蓝桥杯备考:01背包之优化问题。
  • Android应用出海之Klarna登录以及kakao登录
  • 【DeepSeek】一文详解GRPO算法——为什么能减少大模型训练资源?
  • axis=0 和 axis=1的区分设置matplotlib正常显示中文和负号