表單校驗(yàn)
通過(guò)Element中Form組件的表單驗(yàn)證功能進(jìn)行驗(yàn)證
功能中需要使用的屬性
- 需要給
<el-form>綁定的屬性：- model：綁定表單數(shù)據(jù)的對(duì)象
- rules：表單驗(yàn)證對(duì)象，內(nèi)部的屬性名對(duì)應(yīng)要驗(yàn)證的
<el-form-item>的prop（屬性設(shè)置為數(shù)組传轰，內(nèi)部可以同時(shí)制定多條規(guī)則）- required：是否必選
- message：驗(yàn)證失敗的提示信息
- trigger：觸發(fā)方式塘幅，比如bulr就是焦點(diǎn)時(shí)觸發(fā)校驗(yàn)
- max：最大長(zhǎng)度
- min：最小長(zhǎng)度
- pattern：驗(yàn)證的正則規(guī)則
- 給要進(jìn)行驗(yàn)證的
<el-form-item>設(shè)置的屬性- prop：對(duì)應(yīng)model中的哪個(gè)屬性
首先在data中聲明rules規(guī)則對(duì)象
- prop：對(duì)應(yīng)model中的哪個(gè)屬性
// login/index.vue
data () {
return {
form: {
phone: '',
password: ''
},
// 規(guī)則對(duì)象
rules: {}
}
},
給<el-form>設(shè)置屬性啦吧，指定數(shù)據(jù)對(duì)象form與規(guī)則對(duì)象rules
// login/index.vue
<el-form
label-position="top"
:model="form"
:rules="rules"
label-width="80px"
>
給<el-form-item>設(shè)置prop指定名稱，記得要設(shè)置為<el-form-item>的屬性哦
// login/index.vue
<el-form-item label="手機(jī)號(hào)" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
在rules中設(shè)置手機(jī)號(hào)和密碼的驗(yàn)證規(guī)則
// 用于設(shè)置表單校驗(yàn)規(guī)則
rules: {
phone: [
{ required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
{ pattern: /^1\d{10}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)', trigger: 'blur' }
],
password: [
{ required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
{ min: 6, max: 18, message: '密碼長(zhǎng)度為6-18位', trigger: 'blur' }
]
}
設(shè)置完畢之后琼牧，可以發(fā)現(xiàn)，無(wú)論驗(yàn)證的結(jié)果是什么樣的，控制臺(tái)打印驗(yàn)證結(jié)果是都可以發(fā)送請(qǐng)求的喜爷，所以應(yīng)該根據(jù)驗(yàn)證結(jié)果進(jìn)行響應(yīng)的處理
- 在onSubmit中對(duì)表單校驗(yàn)結(jié)果進(jìn)行判斷
- 給
<el-form>添加ref屬性，以便在onSubmit中通過(guò)this.$refs訪問（elementUI設(shè)置就自帶了萄唇，這里只是提個(gè)醒）
// login/index.vue <el-form label-position="top" ref="form" // 添加 ref :model="form" :rules="rules" label-width="80px" >- 通過(guò)Form組件的驗(yàn)證方法validate()進(jìn)行處理
- 給
// Element 文檔示例：validate 傳入回調(diào)函數(shù)的參數(shù)1為驗(yàn)證結(jié)果檩帐，布爾類型
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
})
validate()不傳入回調(diào)，就會(huì)返回promise穷绵，可以通過(guò)ES6的await處理轿塔，同時(shí)通過(guò)測(cè)試后發(fā)現(xiàn)，如果沒有通過(guò)校驗(yàn)仲墨，會(huì)出現(xiàn)異常勾缭，可以通過(guò)try...catch處理，方便提示出錯(cuò)誤的信息
- try 中設(shè)置常規(guī)的代碼
- catch 中可以選擇設(shè)置驗(yàn)證失敗提示
// 登錄功能
async onSubmit () {
try {
// 校驗(yàn)成功后的功能
await this.$refs.form.validate()
console.log('通過(guò)校驗(yàn)')
} catch (err) {
// 校驗(yàn)失敗后的功能
console.log('校驗(yàn)未通過(guò)')
}
}
登錄請(qǐng)求
引入請(qǐng)求模塊request
import request from '@/utils/request'
提交時(shí)發(fā)送請(qǐng)求：
// 登錄功能
async onSubmit () {
try {
// 校驗(yàn)成功后的功能
await this.$refs.form.validate()
// 發(fā)送請(qǐng)求
request({
method: 'POST',
url: '/front/user/login',
data: {
phone: this.form.phone,
password: this.form.password
}
})
} catch (err) {
// 校驗(yàn)失敗后的功能
console.log('校驗(yàn)未通過(guò)')
}
}
由于axios的請(qǐng)求參數(shù)默認(rèn)為application/json格式目养，而這次我們的接口需要x-www-form-urlencoded格式俩由，導(dǎo)致了請(qǐng)求參數(shù)失敗
這個(gè)時(shí)候我們需要根據(jù)接口需要將axios的請(qǐng)求參數(shù)格式進(jìn)行轉(zhuǎn)換，操作方式可以在axios文檔中查看癌蚁。這里我們需要的是使用qs模塊進(jìn)行處理幻梯，首先安裝qs模塊
npm i qs
引入qs模塊
import qs from 'qs'
使用qs模塊處理請(qǐng)求參數(shù)格式
// 發(fā)送請(qǐng)求
request({
method: 'POST',
// header可以省略兜畸，qs.stringify()自動(dòng)設(shè)置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
請(qǐng)求結(jié)果處理
根據(jù)接口文檔中提供的自定義狀態(tài)碼判斷，除了1和200是成功碘梢，其他都是失敗
- 成功后跳轉(zhuǎn)到首頁(yè)/home
- 使用$router.push()編程式導(dǎo)航方法
- 失敗時(shí)進(jìn)行提示
通過(guò)ElementUI的message消息提示組件進(jìn)行了錯(cuò)誤提示美化
Element除了提供組件之后咬摇，還給Vue實(shí)例提供了一些方法，通過(guò)方法可以出發(fā)一些功能- 這里我們使用了message組件中的
$message.error()和$message.success()
- 這里我們使用了message組件中的
// 校驗(yàn)成功后的功能
await this.$refs.form.validate()
// 發(fā)送請(qǐng)求
// {}解構(gòu)對(duì)象內(nèi)的data
const { data } = await request({
method: 'POST',
// header可以省略煞躬，qs.stringify()自動(dòng)設(shè)置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
// 響應(yīng)處理
if (data.state === 1) {
this.$router.push({
name: 'home'
})
this.$message.success('登陸成功')
} else {
this.$message.error('登錄失敗')
}
避免重復(fù)請(qǐng)求
當(dāng)請(qǐng)求速度較慢時(shí)肛鹏，如果多次點(diǎn)擊登錄按鈕會(huì)導(dǎo)致重復(fù)觸發(fā)請(qǐng)求，沒有絲毫的意義
- 在請(qǐng)求期間禁用登錄按鈕點(diǎn)擊事件
- 通過(guò)Element中Button組件的加載中功能設(shè)置就可以了
// Element 文檔示例代碼
<el-button type="primary" :loading="true">加載中</el-button>
給登錄按鈕設(shè)置:loading屬性恩沛，并且綁定布爾值控制
// login/index.vue
<el-button
type="primary"
:loading="isLoginLoading"
@click="onSubmit"
>登錄</el-button>
在data聲明一個(gè)isLoginLoading變量
// 用于保存加載狀態(tài)
isLoginLoading: false
穿插到onSubmit方法中
// 校驗(yàn)成功后的功能
await this.$refs.form.validate()
// 發(fā)送請(qǐng)求
// 按鈕不可再按
this.isLoginLoading = true
// {}解構(gòu)對(duì)象內(nèi)的data
const { data } = await request({
method: 'POST',
// header可以省略在扰，qs.stringify()自動(dòng)設(shè)置
url: '/front/user/login',
// urlencoded格式：名=值$名=值...
data: qs.stringify(this.form)
})
// 請(qǐng)求處理完畢之后恢復(fù)到可以再按按鈕
this.isLoginLoading = false
// 響應(yīng)處理
if (data.state === 1) {
this.$router.push({
name: 'home'
})
this.$message.success('登陸成功')
} else {
this.$message.error(data.message)
}
封裝請(qǐng)求方法
在services目錄下創(chuàng)建user.js，封裝用戶請(qǐng)求的功能模塊
對(duì)用戶登錄接口的請(qǐng)求進(jìn)行封裝：
// 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)
})
}
在登錄頁(yè)面引入封裝模塊并且調(diào)用方法
封裝成功雷客，測(cè)試也沒有問題芒珠，以后就可以將所有的接口請(qǐng)求都封裝到模塊中就行了
