正则
1.1首先,因为我们把v-model="username"改成了,改成了mobile,所以,就把下面数据中的return,改成mobile和code,然后,为了避免后续数据太多混乱了,就可以用info包裹一下
在组件使用了这个变量 我们一定要现在data中申明这个变量 vant组件有申明这个变量的代码 但是我们要做一些改动
1.2接下来就声明一个rules变量,再把上面的mobile和code的rules放到下面的rules中去
如果我们直接在template标签内写rule规则 会页面分工不清晰 所以我们定义一个变量来阐述校验规则
1.3接下来我们写正则校验规则
我们已经把rules规则移动到script标签内 那个现在要继续在这个校验数组里添加校验规则 因为我们用的是正则校验 那么就要用pattern属性
<template>
<div>
<van-nav-bar title="登录"/>
<van-form @submit="onSubmit">
<van-field
v-model="info.mobile"
label="手机号"
placeholder="请输入手机号"
:rules="rules.mobile"
/>
<van-field
v-model="info.code"
label="验证码"
placeholder="请输入验证码"
:rules="rules.code"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">登录</van-button>
</div>
</van-form>
</div>
</template>
<script>
export default {
data() {
return {
info:{
mobile:'',
code:''
},
rules:{
// 手机号的规则
mobile:[
// required:表示是否必填
// message:如果没有满足规则,弹出来的提示
{ required: true, message: '请填写用户名' },
// 用来验证输入的是不是手机号
// ^匹配输入字符串的开始位置
// $匹配输入字符串的结尾位置
// [3-9]匹配3-9之间的字符
// {n}是一个非负整数
//\d查找数字字符
{ pattern:/^1[3-9]\d{10}$/,message:'请输入正确的手机号'}
],
// 验证码的规则
code:[
{ required: true, message: '请填写验证码' },
{ pattern:/^\d{6}$/,message:'请输入正确的验证码'}
]
}
};
},
}
</script>
<style>
</style>
现在如果少输入手机号,或者手机号是12开头都会提示输入错误就算完成了表单验证部分
然后当用户输入了正确手机号和验证码 通过了表单验证 就要发送请求了 这个请求还必须携带两个参数(用户输入的手机号和验证码)
发送请求
2.1首先创建专门写请求的文件夹
2.2因为我们之前已经下载过axios了,所以现在可以直接导入
2.3把接口地址放进来,再根据提示补齐代码
YAPI接口文档地址
2.4这个函数里需要传入两个参数
然后把这个请求封装成一个函数
import request from "@/utils/request";
(monile,code) =>{
return request({
url:'/v1_0/authorizations',
method:'post',
data:{
mobile:'',
code:''
}
})
}
因为需要传入的这两个参数,都放在data数据里,所以可以直接申明需要的数据是data,简写为
import request from "@/utils/request";
(data) => {
return request({
url:'/v1_0/authorizations',
method:'post',
data
})
}
2.5最后就是暴露出去
// 导入了设置基地址的请求对象
import request from "@/utils/request";
// 封装并暴露一个登陆请求
export const login = (data) => {
return request({
url:'/v1_0/authorizations',
method:'post',
data
})
}
2.6使用
2.6.1在api文件夹中新建index.js文件
// 导入use文件夹
import { login } from "./use";
// 封装并暴露出去
export const loginAPI = login;
2.6.2去login的index.vue文件中使用
实际上是‘@/api/index.vue’,但是可以省略为‘@/api’
总结:
首先是utils/request.js文件导入了axios,调用了axios方法,并且暴露了一个变量requset
然后在这个src/api/login这个文件里,导入了request,然后封装了登陆请求函数login,把这个函数又暴露出去了
然后src/api/index.js,定义了一个变量loginAPI接收了login函数 ,再暴露出去
最后在views/login/index.vue文件里,接收了loginAPI变量函数
2.7后面就是写方法(在src/views/login/index.vue中)
<script>
import { loginAPI } from "../../api"
export default {
data() {
return {
info:{
mobile:'',
code:'',
},
rules:{
// 手机号的规则
mobile:[
{ required: true, message: '请填写用户名' },
{ pattern:/^1[3-9]\d{9}$/,message:'请输入正确的手机号'}
],
// 验证码的规则
code:[
{ required: true, message: '请填写验证码' },
{ pattern:/^\d{6}$/,message:'请输入正确的验证码'}
]
}
};
},
methods: {
//因为是异步,所以要写async,await方法包裹这个函数,并且定义一个变量res接收请求发送成功的内容
async onSubmit() {
let res = await loginAPI({
mobile:this.info.mobile,
code:this.info.code
});
console.log(res);
},
},
}
</script>
这样就成功了,验证码是246810