name: 'Login',
components: {
FormErrorMessage
},
data() {
return {
form: {
name: '',
password: ''
}
}
},使用
<el-form-item>
<el-input
v-model="form.name"
v-validate="{required:true}"
name="name"
: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 class="login">
<div class="l-form">
<div class="l-tip">图书馆管理系统</div>
<el-form ref="form" :model="form">
<el-form-item>
<el-input
v-model="form.name"
v-validate="{required:true}"
name="name"
: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}"
name="password"
:class="{'is-danger':errors.has('password')}"
data-vv-as="密码"
placeholder="请输入密码"
