vue登录表单验证
时间: 2023-07-26 20:16:33 浏览: 59
Vue登录表单验证可以使用Vue.js提供的`v-model`指令和`v-bind`指令。以下是一个简单的示例:
```html
<template>
<div>
<form @submit.prevent="login">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" :class="{'is-invalid': !usernameValid}">
<div v-if="!usernameValid" class="invalid-feedback">
Please enter a valid username.
</div>
<br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" :class="{'is-invalid': !passwordValid}">
<div v-if="!passwordValid" class="invalid-feedback">
Please enter a valid password.
</div>
<br>
<button type="submit" :disabled="!formValid">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
usernameValid: true,
passwordValid: true
}
},
computed: {
formValid() {
return this.usernameValid && this.passwordValid;
}
},
methods: {
login() {
// Perform login logic here
}
},
watch: {
username(newVal) {
this.usernameValid = newVal.length > 0;
},
password(newVal) {
this.passwordValid = newVal.length > 0;
}
}
}
</script>
```
在上面的示例中,我们使用了`v-model`指令将输入框的值绑定到组件实例中的`username`和`password`变量上。我们还使用了`v-bind`指令将输入框的`class`属性绑定到一个计算属性中,该计算属性根据输入框的值是否有效来动态地返回一个类名。
我们使用了`watch`选项来监视`username`和`password`变量的变化,并在变量发生变化时更新`usernameValid`和`passwordValid`变量的值。
最后,我们使用了一个计算属性来确定表单是否有效。如果表单有效,则提交按钮将变为可用状态,否则将变为禁用状态。
以上就是一个简单的Vue登录表单验证的示例。您可以根据自己的需求调整代码。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)