vue 实现输入验证
表单输入验证实现
在Vue中实现输入验证可以通过内置指令、第三方库或自定义验证逻辑完成。以下是几种常见方法：
使用v-model和计算属性 通过v-model绑定输入值，结合计算属性或方法进行验证：
data() {
return {
username: '',
email: ''
}
},
computed: {
isUsernameValid() {
return this.username.length >= 3
},
isEmailValid() {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
return re.test(this.email)
}
}VeeValidate库 安装VeeValidate后可以快速实现复杂验证：
import { ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'
extend('required', required)
extend('email', email)
// 模板中使用
<ValidationProvider rules="required|email" v-slot="{ errors }">
<input v-model="email" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>自定义验证指令
创建全局验证指令处理特定验证场景：
Vue.directive('phone', {
bind(el, binding, vnode) {
el.addEventListener('input', () => {
const isValid = /^[0-9]{10,11}$/.test(el.value)
if (!isValid) {
el.classList.add('error')
} else {
el.classList.remove('error')
}
})
}
})表单提交验证
在提交表单时集中验证所有字段：
methods: {
validateForm() {
this.errors = {}
if (!this.username) {
this.errors.username = '用户名必填'
}
if (!this.email.includes('@')) {
this.errors.email = '邮箱格式错误'
}
return Object.keys(this.errors).length === 0
},
onSubmit() {
if (this.validateForm()) {
// 提交逻辑
}
}
}实时验证反馈
结合CSS类提供即时视觉反馈：
.input-error {
border-color: #ff3860;
}
.error-message {
color: #ff3860;
font-size: 0.8rem;
}<input
v-model="username"
:class="{ 'input-error': !isUsernameValid }">
<p
v-if="!isUsernameValid"
class="error-message">
用户名至少3个字符
</p>以上方法可根据项目需求组合使用，VeeValidate适合复杂表单场景，自定义指令适合特定验证规则，而基础验证适合简单表单。
