我们的登录表单还有个问题，就是怎么加验证。表单不验证，一来不容易发现问题，二来会频繁的骚扰后端。自己写验证也可以，但是每次都要重复写很多代码，键盘都受不了。so，还是用组件吧，我使用的是vee-validate。
安装：
yarn add vee-validate
配置：
在main.js中引入vee-validate
// 引入表单验证 import VeeValidate, { Validator } from 'vee-validate' Vue.use(VeeValidate, { fieldsBagName: 'vee-fields' }) // 汉化表单验证 import zhCN from 'vee-validate/dist/locale/zh_CN' Validator.localize('zh_CN', zhCN)
修改login.vue 添加表单验证，以用户名为例，我的要求是用户名不能为空，添加的规则如下：
<el-input v-model="form.name" v-validate="{required:true}" :class="{'is-danger':errors.has('name')}" data-vv-as="用户名" placeholder="请输入用户名" ></el-input>
v-validate 里配置的是验证规则
name 是字段名称，这个名称可以自己定
is-danger 是我为报错的字段配置的一个class名，如果erros.has(字段名)不为空，则说明验证没通过，就添加该class。
is-danger 样式如下，把错误表单的边框设置成红色，目的是为了突出显示错误信息。至于为什么加 /deep/ 前缀，是因为 el-input 组件是element组件，我们在 style 中设置的样式是局部的，没法应用的到element子组件上，所以需要加上/deep/。需不需要加你自己视情况而定。
/deep/ .is-danger input { border-color: #ff3860; }
接下来，我们要考虑错误信息怎么显示。我的做法是直接在表单下显示错误信息就可以，缺点是如果错误信息很多，每个输入框都有一个错误信息的话，表单就会变得很高。
因为每个输入框都要显示错误信息，所以我觉得把显示错误信息的功能做成组件比较好，这样可以通用，省了很多重复代码。
在components文件夹下新建common文件夹，再在commen文件夹下新建 FormErrorMessage.vue 组件
代码如下：
<template> <div> <slot></slot> </div> </template> <script> export default { name: 'FormErrorMessage' } </script> <style scoped> .help { font-size: 0.75rem; margin-top: 0.25rem; line-height: 0.75rem; } .help.is-danger { color: #ff3860; } </style>
在Login.vue中引入
import FormErrorMessage from '../components/common/FormErrorMessage.vue'
在components中配置
name: 'Login', components: { FormErrorMessage }, data() { return { form: { name: '', password: '' } } },
使用
<el-form-item> <el-input v-model="form.name" v-validate="{required:true}" :class="{'is-danger':errors.has('name')}" data-vv-as="用户名" placeholder="请输入用户名" ></el-input> </el-form-item> <el-form-item> <FormErrorMessage v-if="errors.has('name')">{{ errors.first('name') }}</FormErrorMessage> </el-form-item>
表单验证添加了，错误显示的组件也添加了，现在只差怎么触发表单验证了。很简单，修改onSubmit函数，代码如下,如果result为true，则说明表单验证通过了，否则就是有错。
onSubmit() { this.$validator.validate().then(result => { if (result) { login.submit(this.form).then(res => { // console.log('res:', res); if (res.data.status === 1) { // 如果登录成功则跳转我index页面 this.$router.push('/index') } else { // 使用element-ui的message组件，显示登录报错信息 this.$message({ message: res.data.message, type: 'error', duration: 5000 }) } }).catch(error => { this.$message({ message: error, type: 'error', duration: 5000 }) }) } }) },
添加错误提示后，表单样式还需要调整下，我就不调了，结果如下：
完整 Login.vue 代码如下:
<template> <div> <div> <div>图书馆管理系统</div> <el-form ref="form" :model="form"> <el-form-item> <el-input v-model="form.name" v-validate="{required:true}" :class="{'is-danger':errors.has('name')}" data-vv-as="用户名" placeholder="请输入用户名" ></el-input> </el-form-item> <el-form-item> <FormErrorMessage v-if="errors.has('name')">{{ errors.first('name') }}</FormErrorMessage> </el-form-item> <el-form-item> <el-input v-model="form.password" type="password" v-validate="{required:true}" :class="{'is-danger':errors.has('password')}" data-vv-as="密码" placeholder="请输入密码" ></el-input> </el-form-item> <el-form-item> <FormErrorMessage v-if="errors.has('password')">{{ errors.first('password') }}</FormErrorMessage> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script> import login from '../api/login.js' import FormErrorMessage from '../components/common/FormErrorMessage.vue' export default { name: 'Login', components: { FormErrorMessage }, data() { return { form: { name: '', password: '' } } }, methods: { onSubmit() { this.$validator.validate().then(result => { if (result) { login.submit(this.form).then(res => { // console.log('res:', res); if (res.data.status === 1) { // 如果登录成功则跳转我index页面 this.$router.push('/index') } else { // 使用element-ui的message组件，显示登录报错信息 this.$message({ message: res.data.message, type: 'error', duration: 5000 }) } }).catch(error => { this.$message({ message: error, type: 'error', duration: 5000 }) }) } }) }, }, } </script> <style lang="scss" scoped> .login { width: 100%; height: 100%; background: #000; .l-form { position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 300px; margin: auto; border-radius: 8px; background: #fff; padding: 20px; .l-tip { text-align: center; font-size: 24px; font-weight: bold; } .el-form { width: 100%; margin: auto; margin-top: 20px; .el-form-item { button { width: 100%; } } } } } .is-danger input { border-color: #ff3860; } </style>
13. js-cookie本来接下来该讲vuex了，这里插播一个组件 js-cookie
地址：js-cookie
安装
yarn add js-cookie
至于这个怎么用，我们稍后讲vuex的时候再讲解。
14.vuex