[js]vee-validate自定義告警資訊和自定義規則

​​https://vee-validate.logaretm.com/v2/guide/rules.html#date-format-params​​

本身架構自帶很多驗證,但是如果想自定義規則或者國際化,就需要一些自定義操作

1. 在頁面的元件引用:

2. 在vue的computed裡添加規則:

注意,有些規則不需要寫promise回調,有些不寫的話會報錯:

Cannot read property 'then' of undefined

換成上面promise的寫法即可

例如decimal這類正則驗證可以不寫:

​​https://stackoverflow.com/questions/59156440/how-to-validate-decimal-value-in-vee-validate-3-0-version​​

this.$validator.extend("decimal", {
                validate: (value, { decimals = '*', separator = '.' } = {}) => {
                    if (value === null || value === undefined || value === '') {
                        return {
                            valid: false
                        };
                    }
                    if (Number(decimals) === 0) {
                        return {
                            valid: /^-?\d*$/.test(value),
                        };
                    }
                    const regexPart = decimals === '*' ? '+' : `{1,${decimals}}`;
                    const regex = new RegExp(`^[-+]?\\d*(\\${separator}\\d${regexPart})?([eE]{1}[-]?\\d+)?$`);

                    return {
                        valid: regex.test(value),
                    };
                },
            });      

2. 國際化

實際對應的是

this.$validator.extend("decimal", {      

decimal 關鍵字

現在頁面引入

<script src="{{ asset('js/components/error_msg.js') ."?". config('cache.asset_postfix') }}"></script>      

這是laravel的寫法,需要留意的是,有時候會被打包産生緩存,更新不了js,這時候需要把 ."?". config('cache.asset_postfix')去掉

error_msg.js:

不是所有國際化都需要在Vue的類裡面定義,如果本身架構自帶的,隻是想改變msg,就隻需要在error_msg.js裡面定義

加上配置:

注意對應名稱

補充:

控制驗證

resolve來傳回結果

//用promise封裝ajax請求
    function ajaxPromise(type,_url){
        return new Promise(function(resolve,reject){// Promis執行個體化
            var xhr = new XMLHttpRequest();
            xhr.open(type,_url);
            xhr.send();
            xhr.addEventListener("readystatechange",function(){
                if(xhr.readyState !=4 ){// 監聽狀态不對的時候 不指定函數
                    return;
                }
                if(xhr.readyState==4&&xhr.status==200){
                    var res = JSON.parse(xhr.responseText);
                    console.log("ajaxPromise",res)
                    resolve(res); // 回調成功傳回
                }else{
                    reject();// 回調失敗傳回
                }
            })
        })
    }