如何在 v-text-field vuetify 中限制特殊字符但允许字母、数字和空格

Question

下面是公司名称的文本字段。 我不想允许任何特殊字符，但我想允许字母、空格和数字。 我不确定如何在 vuetify 中实现这一点。 对解决这个问题有帮助吗？

<v-text-field required
  label='Name' 
  class="required"
  v-model='company_name'
  :rules="userNameRule">
</v-text-field>

userNameRule: [
 value => !!value || 'Please enter company name'
]

Answer 1

您可以使用v-form来触发规则的验证并为规则使用正则表达式。

<template>
  <v-app>
    <v-main>
      <v-form ref="form">
        <v-text-field required label='Name' class="required" v-model='company_name' :rules="userNameRule" />
        </v-form>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, watch } from 'vue';

const userNameRule = [
  (v) => /^[a-zA-Z0-9 ]+$/.test(v) || 'Name must be alphanumeric',
];
const company_name = ref('');
const form = ref(null);

watch(company_name, () => {
  form.value.validate();
});
</script>

https://vuetifyjs.com/en/components/forms/#props

Answer 2

据我了解，您想对公司名称输入字段应用多项验证。

• 必填字段验证
• 名称只能包含字母、数字和空格。

如果是，您可以使用RegEx实现模式验证。

^[\w\s]+$解释：

^ - 行首，匹配行首[]内定义的字符。
\w - 表示any word character ，通常表示字母数字（字母、数字，不区分大小写）加下划线 (_)
\s - 匹配空白字符。
[] - 一个字符 class，表示match any character contained in the character class 。
+ - 匹配[]中定义的字符的一次或多次出现。
$ - 匹配结尾

这是现场演示：

 const { createApp } = Vue const { createVuetify } = Vuetify const vuetify = createVuetify() const app = createApp({ template: '#app-template', data() { return { company_name: '' } } }).use(vuetify).mount('#app')

 <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script> <script src="https://unpkg.com/@vuetify/nightly@3.1.3-next-20230128.0/dist/vuetify.js"></script> <link rel="stylesheet" href="https://unpkg.com/@vuetify/nightly@3.1.3-next-20230128.0/dist/vuetify.css"/> <script type="text/x-template" id="app-template"> <v-text-field:rules="[ v =>,.v || 'Field is required', v => /^[\w\s]+$/.test(v) || 'Name must only contain alphabets, numeric and space' ]" label='Name' v-model='company_name' ></v-text-field> </script> <div id="app"></div>