表单校验
通过Element中Form组件的表单验证功能进行验证
功能中需要使用的属性
- 需要给
- model：绑定表单数据的对象
- rules：表单验证对象，内部的属性名对应要验证的
- required：是否必选
- message：验证失败的提示信息
- trigger：触发方式，比如bulr就是焦点时触发校验
- max：最大长度
- min：最小长度
- pattern：验证的正则规则
- 给要进行验证的
- prop：对应model中的哪个属性
首先在data中声明rules规则对象
- prop：对应model中的哪个属性
// login/index.vue
data () {
return {
form: {
phone: '',
password: ''
},
// 规则对象
rules: {}
}
},
给
// login/index.vue
给
// login/index.vue
在rules中设置手机号和密码的验证规则
// 用于设置表单校验规则
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ min: 6, max: 18, message: '密码长度为6-18位', trigger: 'blur' }
]
}
设置完毕之后，可以发现，无论验证的结果是什么样的，控制台打印验证结果是都可以发送请求的，所以应该根据验证结果进行响应的处理
- 在onSubmit中对表单校验结果进行判断
- 给
// login/index.vue- 通过Form组件的验证方法validate()进行处理
- 给
// Element 文档示例：validate 传入回调函数的参数1为验证结果，布尔类型
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
})
validate()不传入回调，就会返回promise，可以通过ES6的await处理，同时通过测试后发现，如果没有通过校验，会出现异常，可以通过try...catch处理，方便提示出错误的信息
- try 中设置常规的代码
- catch 中可以选择设置验证失败提示
// 登录功能
async onSubmit () {
try {
// 校验成功后的功能
await this.$refs.form.validate()
console.log('通过校验')
} catch (err) {
// 校验失败后的功能
console.log('校验未通过')
}
}
登录请求
引入请求模块request
import request from '@/utils/request'
提交时发送请求：
// 登录功能
async onSubmit () {
try {
// 校验成功后的功能
await this.$refs.form.validate()
// 发送请求
request({
method: 'POST',
url: '/front/user/login',
data: {
phone: this.form.phone,
password: this.form.password
}
})
} catch (err) {
// 校验失败后的功能
console.log('校验未通过')
}
}
由于axios的请求参数默认为application/json格式，而这次我们的接口需要x-www-form-urlencoded格式，导致了请求参数失败
这个时候我们需要根据接口需要将axios的请求参数格式进行转换，操作方式可以在axios文档中查看。这里我们需要的是使用qs模块进行处理，首先安装qs模块
npm i qs
引入qs模块
import qs from 'qs'
使用qs模块处理请求参数格式
// 发送请求
request({
method: 'POST',
// header可以省略，qs.stringify()自动设置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
成功
请求结果处理
根据接口文档中提供的自定义状态码判断，除了1和200是成功，其他都是失败
- 成功后跳转到首页/home
- 使用$router.push()编程式导航方法
- 失败时进行提示
通过ElementUI的message消息提示组件进行了错误提示美化
Element除了提供组件之后，还给Vue实例提供了一些方法，通过方法可以出发一些功能- 这里我们使用了message组件中的
$message.error()和$message.success()
- 这里我们使用了message组件中的
// 校验成功后的功能
await this.$refs.form.validate()
// 发送请求
// {}解构对象内的data
const { data } = await request({
method: 'POST',
// header可以省略，qs.stringify()自动设置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
// 响应处理
if (data.state === 1) {
this.$router.push({
name: 'home'
})
this.$message.success('登陆成功')
} else {
this.$message.error('登录失败')
}
避免重复请求
当请求速度较慢时，如果多次点击登录按钮会导致重复触发请求，没有丝毫的意义
- 在请求期间禁用登录按钮点击事件
- 通过Element中Button组件的加载中功能设置就可以了
// Element 文档示例代码
加载中
给登录按钮设置:loading属性，并且绑定布尔值控制
// login/index.vue
登录
在data声明一个isLoginLoading变量
// 用于保存加载状态
isLoginLoading: false
穿插到onSubmit方法中
// 校验成功后的功能
await this.$refs.form.validate()
// 发送请求
// 按钮不可再按
this.isLoginLoading = true
// {}解构对象内的data
const { data } = await request({
method: 'POST',
// header可以省略，qs.stringify()自动设置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
// 请求处理完毕之后恢复到可以再按按钮
this.isLoginLoading = false
// 响应处理
if (data.state === 1) {
this.$router.push({
name: 'home'
})
this.$message.success('登陆成功')
} else {
this.$message.error(data.message)
}
封装请求方法
在services目录下创建user.js，封装用户请求的功能模块
对用户登录接口的请求进行封装：
// serveices/user.js
import request from '@/utils/request'
import qs from 'qs'
// 登录接口
export const login = data => {
return request({
method: 'POST',
url: '/front/user/login',
data: qs.stringify(data)
})
}
在登录页面引入封装模块并且调用方法
封装成功，测试也没有问题，以后就可以将所有的接口请求都封装到模块中就行了