如何进行表单验证:项目使用的是elementUI组件库,Form表单内置了校验功能
参考:组件 | Element
el-form: 配置model和rules
el-form-item: 配置prop
el-input: 配置v-model 和 name
当采用的是非常简单的校验逻辑,我们只需要通过简单的配置即可完成。但是如果校验逻辑比较复杂,推荐采取自定义校验函数的写法,因为函数里面可以更加灵活的定义各种逻辑。
<template>
<el-form
:model="loginForm"
:rules="loginRules"
>
<el-form-item prop="mobile">
<el-input
ref="mobile"
v-model="loginForm.mobile"
placeholder="Username"
name="mobile"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
name="password"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
// 校验手机号
const validateMobile = (rule, value, callback) => {
if (!/^1[3-9]\d{9}$/.test(value)) {
callback(new Error('请输入合法的手机号'))
} else {
callback()
}
}
return {
loginForm: {
mobile: '',
password: ''
},
loginRules: {
mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
]
}
}
}
}
</script>
登录实现:
- 点击login按钮做表单兜底统一校验,校验通过实现提交(参考:组件 | Element)
- 成功之后弹框提示用户
登录成功(
elementUI弹框组件做提示)
- 成功之后跳转到首页(跳转用路由跳转)(调用登录接口,对照接口文档封装api函数)
1)封装登录接口 - api/user.js
2)配置baseURL - .env.development
3)在request中设置baseUrl - utils/index.js
4)登录接口调用 - Login/index.vue
4)handleLogin () {
this.$refs.loginForm.validate(async valid => {
if (valid) {
this.loading = true
await login(this.loginForm)
this.$message.success('登录成功')
this.$router.push({ path: this.redirect || "/" })
this.loading = false
}
})
}
this.$refs.loginForm
获取到表单引用对象。validate 函数中接收一个回调函数,第一个形参 callback 是验证结果(boolean值),代表验证通过或失败。
axios响应:
问题一:Axios默认会给我们包裹一个data字段,导致每次在业务模块获取数据都需要写res.data.data
解决办法:在拦截器中统一return response.data
问题二:后端自定义标识做当前接口成功失败的字段,叫做xxx,而不是通过http状态码是否为2xx-3xx来标识接口是否成功。
解决办法:可以在拦截器中做后端自定义状态码判断,如果成功,也就是success字段为true,则return response.data
如果失败,也就是xxx字段为false,则可以提示用户并且手动 return一个 Promise.reject()
,让错误被抛出。
import { Message } from 'element-ui'
// 响应拦截器
service.interceptors.response.use(
response => {
// 解构后端字段
// success: 接口是否成功
// data: 接口数据
// message: 接口提示文案
const { success, data, message } = response.data
if (success) {
return data
} else {
// 错误提示用户
Message.warning(message)
// 手动抛出错误
return Promise.reject(message)
}
},
error => {
return Promise.reject(error)
}
)