JavaScript设计模式系列03_策略模式做的表单验证

最新推荐文章于 2022-11-25 14:35:14 发布

田江

最新推荐文章于 2022-11-25 14:35:14 发布

阅读量438

点赞数

分类专栏： JavaScript从入门到精通设计模式文章标签： javascript 设计模式 web前端开发面向对象 web应用

本文链接：https://blog.csdn.net/jiang7701037/article/details/79027609

版权

JavaScript从入门到精通同时被 2 个专栏收录

147 篇文章 80 订阅

订阅专栏

设计模式

7 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ padding:0; margin:0}


    </style>
</head>
<body>
    <form id="f" method="post" action="regSave.php">
        身份证号码：<input id="txtId" type="text" value="612301197000000000"><br/>
        电话号码：<input id="txtPhone" type="text" value="18991274261"><br/>
        电邮：<input id="txtEmail" type="text" value="7701037@qq.com"><br/>
        <input type="submit" value="注册">
    </form>
    <div id="msgBox">

    </div>

</body>
</html>

<script type="text/javascript">

function  $(id) {
    return document.getElementById(id);
}
function  $create(tagName) {
    return document.createElement(tagName);
}

//策略模式的代码
var validator = {
    //写验证类型（描述了所有类型数据的验证规则）
    types:{},
    //验证的数据类型（针对不同类型的数据，选择不同的验证规则）
    config:{},

    //存放所有错误信息的数组
    errMsg:[],

    //验证函数(传入若干数据，一次性验证完成)
    //模拟一下data参数
    validator:function (data) {
        this.errMsg=[];
        for(let key in data){
            if(!this.types[this.config[key]].validator(data[key])){
                this.errMsg.push(this.types[this.config[key]].errorMsg);
            }
        }
    }
};

validator.types.isEmail ={
    validator:function(value){
        var reg = /^[\w\.]+@\w+(\.com|\.net|\.cn|\.com\.cn)$/;
        return reg.test(value);
    },
    errorMsg:"邮箱格式不合法，合法的邮箱格式如：7701037@qq.com"
};


validator.types.isPhone ={
    validator:function(value){
        var reg = /^1[34578]\d{9}$/;
        return reg.test(value);
    },
    errorMsg:"手机格式不合法，长度为11位的数字，而且必须以1开头"
};

validator.types.isId ={
    validator:function(value){
        var reg = /^[1-9]\d{16}[\dX]$/;
        return reg.test(value);
    },
    errorMsg:"身份证号码不合法"
}

validator.config={
    "id":"isId",
    "email":"isEmail",
    "phone":"isPhone",
}


function checkAll(){
    //1、组织数据成json格式（获取文本框的内容）
    var d = {
        "email":$("txtEmail").value,
        "phone":$("txtPhone").value,
        "id":$("txtId").value
    };
    validator.validator(d);
    if(validator.errMsg.length>0){
        //把所有的错误信息放入到div里（msgBox）
        let htmlStr="";
        for(let i in validator.errMsg){
            htmlStr+= validator.errMsg[i]+"<br/>";
        }
        $("msgBox").innerHTML = htmlStr;
        return false;
    }else{
        return true;
    }
}

window.onload = function(){
    $("f").onsubmit = function(){
        /*
        //1、前端验证
        if(!checkAll()){
            //2、不通过则不提交
            return false;//阻止事件的默认行为
        }
        */
        return checkAll();
    }
}


</script>

田江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式系列03_策略模式做的表单验证

效果图：代码： *{ padding:0; margin:0} 身份证号码：电话号码：电邮： function $(id) { return document.get
复制链接

扫一扫

专栏目录