vue实现登录表单验证
表单结构设计
使用Vue的v-model指令绑定表单数据，结合HTML5原生验证属性（如required、pattern）实现基础验证。表单通常包含用户名、密码等字段：
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>用户名</label>
<input
v-model="form.username"
type="text"
required
@blur="validateField('username')"
>
<span v-if="errors.username">{{ errors.username }}</span>
</div>
<div>
<label>密码</label>
<input
v-model="form.password"
type="password"
required
minlength="6"
@blur="validateField('password')"
>
<span v-if="errors.password">{{ errors.password }}</span>
</div>
<button type="submit">登录</button>
</form>
</template>数据与验证逻辑
在Vue组件的data或setup中定义表单数据和错误信息对象，通过方法实现验证逻辑：
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
errors: {
username: '',
password: ''
}
}
},
methods: {
validateField(field) {
const value = this.form[field];
if (!value) {
this.errors[field] = '该字段不能为空';
return false;
}
if (field === 'password' && value.length < 6) {
this.errors[field] = '密码至少6位';
return false;
}
this.errors[field] = '';
return true;
},
handleSubmit() {
const isValid = Object.keys(this.form).every(field =>
this.validateField(field)
);
if (isValid) {
console.log('提交数据:', this.form);
// 调用API登录逻辑
}
}
}
}
</script>使用Vuelidate库
对于复杂验证场景，可引入轻量级验证库Vuelidate。安装后通过声明式规则定义验证：
npm install vuelidate配置验证规则与组件：
import { required, minLength } from 'vuelidate/lib/validators';
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
validations: {
form: {
username: { required },
password: { required, minLength: minLength(6) }
}
},
methods: {
handleSubmit() {
this.$v.$touch();
if (!this.$v.$invalid) {
console.log('验证通过');
}
}
}
}模板中通过$v对象显示错误：
<span v-if="$v.form.username.$error">用户名必填</span>
<span v-if="$v.form.password.$error">
{{ $v.form.password.minLength ? '密码长度不足' : '密码必填' }}
</span>实时反馈优化
通过计算属性或观察器实现输入时实时验证，提升用户体验：
watch: {
'form.username'(value) {
if (value) this.validateField('username');
},
'form.password'(value) {
if (value) this.validateField('password');
}
}或添加输入事件触发验证：
<input
v-model="form.username"
@input="validateField('username')"
>样式与交互增强
结合CSS类动态反馈验证状态：
.error { color: red; }
.input-error { border-color: red; }模板中动态绑定类：
<input
:class="{ 'input-error': errors.username }"
>
<span class="error">{{ errors.username }}</span>
