真實(shí)開發(fā)場(chǎng)景：最近入職實(shí)習(xí)秩伞，公司開發(fā)模塊有個(gè)簡(jiǎn)單的需求：前端表單根據(jù)下拉選項(xiàng)的類別進(jìn)行校驗(yàn) 尿这；并提示不同的校驗(yàn)信息切油。思考過后發(fā)現(xiàn)確實(shí)是常用的功能只磷，如錄入的賬號(hào)可綁定郵箱经磅、QQ、手機(jī)等不同信息時(shí)的校驗(yàn)钮追，這些都需要前端進(jìn)行動(dòng)態(tài)校驗(yàn)预厌，而不是后端處理
需求分析
- 改變下拉框 選項(xiàng)，前端校驗(yàn)對(duì)應(yīng)的類型是否滿足規(guī)則
- 需要校驗(yàn)地址類型：IPv4元媚，IPv6 和 域名 （效果圖如下）
效果圖1
效果圖2
實(shí)現(xiàn)思路
- 在el-select 下拉框上綁定change 響應(yīng)事件轧叽，在選項(xiàng)內(nèi)容改變時(shí)觸發(fā)
- 編寫change的回調(diào)函數(shù)，serverAddrChanged(value)刊棕，其中參數(shù)是下拉框雙向綁定的value值
- 將表單校驗(yàn)規(guī)則聲明為全局屬性炭晒，通過prop屬性 和 value值動(dòng)態(tài)設(shè)置校驗(yàn)規(guī)則
核心代碼
前端下拉框，與規(guī)則聲明
<el-form :rules="rules1">
<!--.............-->
<el-form-item label="地址類型：" prop="serverAddrType">
<el-select class="wh200" @change="serverAddrChanged" v-model="serverForm.serverAddrType" placeholder="選擇地址類型" clearable="" filterable="">
<!-- 此處選項(xiàng)是value 到 name 的一個(gè)映射（展現(xiàn)的是name甥角，真實(shí)值為value）-->
<el-option v-for="item in serverAddrType_opt" :key="item.codeValue" :label="item.codeName" :value="item.codeValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="IP或域名：" prop="serverIp">
<el-input v-model.trim="serverForm.serverIp" placeholder="請(qǐng)輸入IP或域名" ></el-input>
</el-form-item>
</el-form>
<script>
data(){
return{
// ....
rules1: {}
}
}
</script>
類型修改后觸發(fā)函數(shù)
// 地址類型下拉框 改變
serverAddrChanged(value){
//value === codeValue 改變鍵入規(guī)則
this.rules1['serverIp'] = [];
let pt = '';
let msg = '';
if(value === 2570001){
// ipv4
msg = '請(qǐng)輸入正確的IPv4地址';
pt = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[09][0-9]|[1-9][0-9]|[0-9])$/;
}else if(value === 2570002){
msg = '請(qǐng)輸入正確的IPv6地址';
pt = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
}else{
msg = '請(qǐng)輸入正確的域名';
pt = /^([H|h][T|t][T|t][P|p][S|s]?:\/\/)[^\s]+/;
}
this.rules1['serverIp'].push({required: true, message: msg, pattern: pt, trigger: "blur"});
}
注意事項(xiàng)（坑）
- 每次編輯或添加服務(wù)時(shí)网严，前端的校驗(yàn)值需清空（否則會(huì)記錄上次的錯(cuò)誤提示，用戶還沒操作就爆紅）
實(shí)現(xiàn)很簡(jiǎn)單嗤无，內(nèi)置的resetFields() 清空校驗(yàn)信息
this.$nextTick(() => {
this.$refs.serverForm.resetFields();
});
- 由于校驗(yàn)是在下拉框改變時(shí)觸發(fā)事件初始化的震束，所以在編輯某個(gè)服務(wù)時(shí)默認(rèn)狀態(tài)下無校驗(yàn)，也就是說這時(shí)前端的校驗(yàn)就失效了当犯，要做的就是在回顯數(shù)據(jù)的同時(shí)垢村，依靠當(dāng)前回顯的類型，初始化表單的校驗(yàn)規(guī)則
// 下拉正則回顯
this.serverAddrChanged(this.serverForm["serverAddrType"]);
