vue3.0+ts实现表单验证及解决vue-i18n表单验证rules自动触发问题

### 实现 Vue3 和 TypeScript 中的表单验证 为了实现在 Vue3 和 TypeScript 项目中对表单进行校验并禁止输入特殊字符，可以采用多种方法来确保用户体验良好且逻辑严谨。 #### 使用正则表达式过滤输入 一种常见的方式是在 `input` 或者 `change` 事件触发时利用正则表达式去除任何不符合条件的字符。下面是一个简单的例子： ```typescript // 定义一个函数用于移除字符串中的非法字符 function sanitizeInput(value: string): string { const regex = /[^a-zA-Z0-9]/g; // 只允许字母和数字 return value.replace(regex, &#39;&#39;); } ``` 当用户尝试提交含有不合法字符的数据时，可以通过上述自定义的方法清理这些数据后再做进一步处理[^1]。 #### 利用 Vuelidate 库简化验证过程 对于更复杂的场景，推荐使用专门设计用来帮助构建健壮表单的应用程序库——Vuelidate。它支持声明式的规则配置以及异步验证等功能，并且很好地集成了 TypeScript 支持。 安装依赖： ```bash npm install @vuelidate/core @vuelidate/validators ``` 创建组件内的验证逻辑如下所示： ```typescript import { useVModel } from &#39;@vueuse/core&#39;; import { helpers, required, minLength } from &#39;@vuelidate/validators&#39;; import * as Vuelidate from &#39;@vuelidate/core&#39;; export default defineComponent({ setup() { interface FormState { name?: string; } const state = reactive<FormState>({}); const rules = computed(() => ({ name: { required, noSpecialChars: helpers.withMessage( &#39;No special characters allowed&#39;, (value) => /^[A-Za-z\d]*$/.test(value || &#39;&#39;) ) } })); const v$ = new Vuelidate.Vuelidation(rules, toRefs(state)); function handleSubmit(): void { v$.value.$validate(); if (!v$.value.$error) { console.log(&#39;Form submitted successfully&#39;); } } return { ...toRefs(state), v$, handleSubmit }; }, }) ``` 在这个案例里，除了内置的一些简单验证器外，还额外添加了一个名为 `noSpecialChars` 的自定义验证器以满足特定需求[^2]。 #### 结合 ref 和 watch 进行即时反馈 考虑到实时性的要求，在某些情况下可能希望每当用户的输入发生变化就立即给出提示而不是等到点击按钮才去检查有效性。此时就可以借助于 Vue 提供的监听机制配合前面提到的技术方案共同作用。 ```typescript const inputText = ref(&#39;&#39;); watch(inputText, () => { // 清理掉所有非预期之外的内容 inputText.value = sanitizeInput(inputText.value); }, { immediate: true }); ``` 这段代码会持续监视 `inputText` 的变动情况，并自动调用之前定义好的净化函数来保持其纯净度[^3]。