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="提交" onclick="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里设置校验判断 不满足条件的拦截 返回空字符串 满足条件的直接赋值保存从而实现一个简易的 提交数据校验效果。

总结完啦，继续上班码代码了~