vue登录进行非空验证
时间: 2023-07-26 16:46:40 浏览: 63
可以使用Vue的v-model和v-bind指令来实现对登录表单非空验证。代码示例如下:
```html
<template>
<form>
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" required>
<label for="password">密码</label>
<input type="password" id="password" v-model="password" required>
<button type="submit" @click.prevent="login">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
}
},
methods: {
login() {
// 判断用户名和密码是否为空
if (!this.username || !this.password) {
alert('用户名和密码不能为空')
return
}
// 登录逻辑
// ...
},
},
}
</script>
```
在上述代码中,我们使用了HTML5的`required`属性,表示该输入框不能为空。同时,在`login`方法中,我们判断了`username`和`password`是否为空,如果为空则弹出提示框。如果不为空,则可以执行登录逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)