Element UI：Vue 實現前端表單依據下拉框動態校驗

真實開發場景：最近入職實習，公司開發模塊有個簡單的需求：前端表單根據下拉選項的類別進行校驗 ；並提示不同的校驗信息。思考過後發現確實是常用的功能，如錄入的賬號可綁定郵箱、QQ、手機等不同信息時的校驗，這些都需要前端進行動態校驗，而不是後端處理

需求分析

• 改變下拉框 選項，前端校驗對應的類型是否滿足規則
• 需要校驗地址類型：IPv4，IPv6 和 域名 （效果圖如下）

實現思路

• 在el-select 下拉框上綁定change 響應事件，在選項內容改變時觸發
• 編寫change的回調函數，serverAddrChanged(value)，其中參數是下拉框雙向綁定的value值
• 將表單校驗規則聲明爲全局屬性，通過prop屬性 和 value值動態設置校驗規則

核心代碼

前端下拉框，與規則聲明

<el-form :rules="rules1">
<!--.............-->
  <el-form-item label="地址類型：" prop="serverAddrType"> 
   <el-select class="wh200" @change="serverAddrChanged" v-model="serverForm.serverAddrType" placeholder="選擇地址類型" clearable="" filterable=""> 
      <!-- 此處選項是value 到 name 的一個映射（展現的是name，真實值爲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="請輸入IP或域名" ></el-input>
    </el-form-item>
</el-form>

<script>
  data(){
    return{
      // ....
      rules1: {}
    }
  }
</script>

類型修改後觸發函數

        // 地址類型下拉框 改變
        serverAddrChanged(value){
            //value === codeValue 改變鍵入規則
            this.rules1['serverIp'] = [];
            let pt = '';
            let msg = '';
            if(value === 2570001){
                // ipv4
                msg = '請輸入正確的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 = '請輸入正確的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 = '請輸入正確的域名';
                pt = /^([H|h][T|t][T|t][P|p][S|s]?:\/\/)[^\s]+/;
            }
            this.rules1['serverIp'].push({required: true, message: msg, pattern: pt, trigger: "blur"});  
        }

注意事項（坑）

• 每次編輯或添加服務時，前端的校驗值需清空（否則會記錄上次的錯誤提示，用戶還沒操作就爆紅）
  實現很簡單，內置的sesetFields() 清空校驗信息

            this.$nextTick(() => {
                this.$refs.serverForm.resetFields(); 
            });

• 由於校驗是在下拉框改變時觸發事件初始化的，所以在編輯某個服務時默認狀態下無校驗，也就是說這時前端的校驗就失效了，要做的就是在回顯數據的同時，依靠當前回顯的類型，初始化表單的校驗規則

            // 下拉正則回顯
            this.serverAddrChanged(this.serverForm["serverAddrType"]);