Vue3中使用Maska实现全名输入掩码：首字母自动大写方案

完全可以实现这个需求，借助Maska的自定义正则掩码和transform转换函数就能搞定，核心是限制输入仅允许字母和空格，同时自动处理空格后的首字母大写。

实现代码示例 #

在Vue组件中可以这样写：

<template>
  <input
    v-maska="{ mask: /^[a-zA-Z\s]*$/, transform: formatFullName }"
    placeholder="请输入全名"
  />
</template>

<script setup>
// 处理全名格式：空格后首字母自动大写
const formatFullName = (value) => {
  // 匹配字符串开头或空格后的第一个字符，转为大写
  return value.replace(/(^\w|\s\w)/g, match => match.toUpperCase());
};
</script>

代码说明 #

• 掩码规则：/^[a-zA-Z\s]*$/ 是正则表达式掩码，限制输入框只能输入大小写字母和空格，避免非法字符输入。
• 转换逻辑：formatFullName 函数通过正则匹配(^\w|\s\w)（字符串开头的第一个字符，或空格后的第一个字符），将匹配到的字符转为大写，实现实时自动修正格式的效果。

可选调整 #

如果希望除了每个单词的首字母外，其余字母统一转为小写，可以修改转换函数：

const formatFullName = (value) => {
  return value.toLowerCase().replace(/(^\w|\s\w)/g, match => match.toUpperCase());
};

内容的提问来源于stack exchange，提问作者Vinicius Andrade