vue实现必填
Vue 实现表单必填验证的方法
使用 Vue 内置指令 v-model 和 required
在表单输入元素上添加 v-model 绑定数据，并设置 required 属性。结合 :disabled 控制提交按钮状态，确保必填字段未填写时按钮不可点击。
<template>
<form @submit.prevent="submitForm">
<input v-model="formData.name" required placeholder="姓名">
<button :disabled="!formData.name">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: { name: '' }
}
}
}
</script>结合 Vue 计算属性验证
通过计算属性实时检查必填字段是否为空，动态控制提交按钮状态或显示错误提示。
<template>
<form>
<input v-model="formData.email" placeholder="邮箱">
<span v-if="isEmailEmpty" class="error">邮箱必填</span>
</form>
</template>
<script>
export default {
data() {
return {
formData: { email: '' }
}
},
computed: {
isEmailEmpty() {
return this.formData.email.trim() === ''
}
}
}
</script>使用第三方验证库 VeeValidate
安装 VeeValidate 库后，通过 ValidationProvider 组件实现更复杂的必填验证逻辑。
npm install vee-validate<template>
<ValidationProvider rules="required" v-slot="{ errors }">
<input v-model="email">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
},
data() {
return {
email: ''
}
}
}
</script>自定义验证指令
创建全局自定义指令 v-required，自动为元素添加必填验证和错误提示功能。
// main.js
Vue.directive('required', {
bind(el, binding, vnode) {
el.addEventListener('blur', () => {
if (!el.value) {
// 显示错误逻辑
}
});
}
});<input v-model="username" v-required>表单提交前验证
在提交方法中手动检查所有必填字段，存在空值时阻止表单提交并提示用户。
methods: {
submitForm() {
if (!this.formData.name || !this.formData.email) {
alert('请填写所有必填字段');
return;
}
// 提交逻辑
}
}
