vue 实现输入验证
Vue 输入验证实现方法
使用内置指令 v-model 和 v-bind
Vue 的 v-model 指令可以轻松实现双向数据绑定，结合 HTML5 的表单验证属性如 required、pattern、min、max 等，可以快速实现基础验证。
<input
v-model="username"
type="text"
required
pattern="[A-Za-z]{3,}"
@blur="validateInput"
>
<p v-if="errors.username">{{ errors.username }}</p>自定义验证方法
通过 Vue 的 methods 定义验证逻辑，在用户输入或提交时触发验证。
methods: {
validateInput(field, value) {
const rules = {
email: val => /.+@.+\..+/.test(val) || "Invalid email",
password: val => val.length >= 6 || "Password too short"
};
this.errors[field] = rules[field]?.(value);
}
}使用计算属性
计算属性适合实时验证，特别是需要根据多个数据字段计算验证结果的场景。
computed: {
isFormValid() {
return (
this.username &&
this.email.includes('@') &&
this.password.length >= 6
);
}
}第三方验证库
Vuelidate 和 VeeValidate 是流行的 Vue 验证库，提供声明式验证规则和错误处理。
Vuelidate 示例：
import { required, email } from 'vuelidate/lib/validators';
validations: {
email: { required, email }
}VeeValidate 示例：
<ValidationProvider rules="required|email" v-slot="{ errors }">
<input v-model="email" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>表单提交验证
在提交表单时进行整体验证，阻止无效提交。
methods: {
submitForm() {
if (!this.isFormValid) {
this.showError = true;
return;
}
// 提交逻辑
}
}实时反馈优化
结合 watch 或 @input 事件实现输入时实时验证，提升用户体验。
watch: {
email(newVal) {
this.validateInput('email', newVal);
}
}样式反馈
根据验证状态动态绑定 CSS 类，直观展示验证结果。
<input
:class="{ 'is-invalid': errors.email }"
v-model="email"
>通过以上方法可以灵活实现 Vue 的输入验证，从简单到复杂场景均可覆盖。第三方库适合大型项目，而内置指令和自定义方法适合轻量级需求。
