使用vue写一个登录页面,有用户名和密码,都做一些输入校验,不符合校验规则就提示重新输入,最后写出来代码
时间: 2023-01-11 20:55:36 浏览: 185
好的,我来给你写一个简单的登录页面的例子。
首先,在 Vue 项目中创建一个组件文件 `login.vue`,并在其中引入 Vue 和用于输入校验的库(例如 vee-validate)。
然后,在组件的 `template` 部分中编写 HTML 代码,包括输入框和提交按钮:
```
<template>
<div class="login">
<form @submit.prevent="submitForm">
<label for="username">用户名:</label>
<input v-model="form.username" type="text" id="username" name="username" v-validate="'required|alpha_dash'"/>
<span class="error" v-if="errors.has('username')">{{ errors.first('username') }}</span>
<label for="password">密码:</label>
<input v-model="form.password" type="password" id="password" name="password" v-validate="'required|min:6'"/>
<span class="error" v-if="errors.has('password')">{{ errors.first('password') }}</span>
<button type="submit">登录</button>
</form>
</div>
</template>
```
接下来,在组件的 `script` 部分中编写 JavaScript 代码,包括组件的数据、方法和输入校验规则:
```
<script>
import { extend } from 'vee-validate';
import { required, alpha_dash, min } from 'vee-validate/dist/rules';
extend('required', required);
extend('alpha_dash', alpha_dash);
extend('min', min);
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
submitForm() {
this.$validator.validateAll().then(result => {
if (result) {
// 输入校验通过,可以进行登录操作
} else {
// 输入校验不通过,提示用户重新输入
alert('输入不