vue 表单验证非空
时间: 2023-11-16 10:04:36 浏览: 78
可以使用 Vue.js 提供的表单验证功能来实现非空验证。具体步骤如下:
1. 在表单元素上添加 `v-model` 指令,将表单数据绑定到 Vue 实例的数据中。
2. 在表单元素上添加 `v-bind:class` 指令,根据表单验证结果动态绑定样式类。
3. 在表单元素上添加 `v-show` 指令,根据表单验证结果动态显示或隐藏错误提示信息。
下面是一个示例代码:
```html
<template>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" :class="{ 'is-invalid': !username }">
<div class="invalid-feedback" v-show="!username">用户名不能为空</div>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" :class="{ 'is-invalid': !password }">
<div class="invalid-feedback" v-show="!password">密码不能为空</div>
</div>
<button type="submit" :disabled="!username || !password">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
}
}
</script>
<style>
.is-invalid {
border-color: red;
}
.invalid-feedback {
color: red;
}
</style>
```
在上面的代码中,我们使用了 `v-bind:class` 指令和 `v-show` 指令来实现表单验证。当用户名或密码为空时,会添加 `is-invalid` 样式类,并显示错误提示信息。