ES6 proxy 屬性實現 表單數據提交之前校驗攔截

最近在學習ES6的特性 看到proxy代理 上網查了一下運用場景看到有用proxy 可以進行表單提交數據攔截 所以敲一個demo記錄一下

話不多說 貼代碼

<!-- html部分 -->
<form action="">
        <div>
            <label for="">姓名</label><input type="text" name="username">
        </div>
        <div>
            <label for="">手機號</label><input type="text" name="phone">
        </div>
        <input type="button" value="提交" οnclick="formSub()">
    </form>

<!--js 部分-->
// proxy實際應用場景1：利用proxy攔截判斷 form表單提交數據
        var formData={};
        var formHandler={
            get:function(target,propKey){
                // 獲取數據攔截
                /* console.log()
                if(propKey=="username"){
                    // 判斷用戶名是否正確
                    var reg = /^([\u4E00-\u9FA5])*$/;
                    if(!reg.test(target[propKey])){   
                        alert("姓名必須爲中文");
                        return ""
                    }
                } */
                //return target[propKey];
                
            },
            set:function(target,propKey,value){
                // 設置數據攔截
                console.log("此時爲設置數據");
                if(propKey=="username"){
                    // 判斷用戶名是否正確
                    let reg = /^([\u4E00-\u9FA5])*$/;
                    if(!reg.test(value)){   
                        alert("姓名必須爲中文");
                        return ""
                    }
                }
                if(propKey=="phone"){
                    let reg=/^1[3456789]\d{9}$/;
                    console.log(value);
                    if(!reg.test(Number(value))){
                        alert("手機號有誤");
                        return ""
                    }
                }
                // 對於滿足條件的數據直接保存
                target[propKey]=value;
            }
        }
        var formproxy=new Proxy(formData,formHandler);
        // 提交表單
        function formSub(){
            console.log("2333");
            //獲取表單數據
            
            $("form input[type='text']").each(function(){
                console.log($(this).attr("name"),$(this).val());
                formproxy[$(this).attr("name")]=$(this).val();
            })
            console.log("表單提交數據",formproxy);
            
            console.log(formproxy.username);
        }

當前點擊按鈕調用了 formSub方法的時候 因爲對formproxy對象的值進行了重新設置 所以觸發了proxy代理中的set事件 通過在set裏設置校驗判斷 不滿足條件的攔截 返回空字符串 滿足條件的直接賦值保存從而實現一個簡易的 提交數據校驗效果。

總結完啦，繼續上班碼代碼了~