js正则表达式案例之表单验证

最新推荐文章于 2022-06-04 22:00:20 发布

ITzhongzi

最新推荐文章于 2022-06-04 22:00:20 发布

阅读量514

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/54173828

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    span {
        color: red;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
    }

    .wrong {
        color: red
    }

    .right {
        color: green;
    }

    .defau {
        width: 200px;
        height: 20px;
    }

    .de1 {
        background-position: 0 -20px;
    }
</style>
<body>
<div class="container">
    <label>Q Q</label><input type="text" id="inp1"><span></span><br/>
    <label>手机</label><input type="text" id="inp2"><span></span><br/>
    <label>邮箱</label><input type="text" id="inp3"><span></span><br/>
    <label>座机</label><input type="text" id="inp4"><span></span><br/>
    <label>姓名</label><input type="text" id="inp5"><span></span><br/>
</div>
<script>
    //所有的输入框
    var inpQQ = document.getElementById("inp1");
    var inpMoblie = document.getElementById("inp2");
    var inpEmail = document.getElementById("inp3");
    var inpTel = document.getElementById("inp4");
    var inpName = document.getElementById("inp5");
    //所有的规则
    //QQ的规律 5-11位数字 开头不能是0的数字
    var regQQ = /^[1-9]\d{4,10}$/;
    //手机的规律 11位数字 而且有号段
    //13[0-9] 14[57] 15[0-9] 17[0-9] 18[0-9]
    var regMobile = /^(13[0-9]|14[57]|15[09]|17[09]|18[09])\d{8}$/;
   /* var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;*/
    //邮箱的规律 abc-abc-abc@abc.com donald-trump@white-house
    //var regEmail = /^\w+@\w+\.\w+$/;
    var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//    var regEmail = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    //
    var regTel = /^0\d{2,3}-\d{7,8}$/;
    var regName = /^[\u4e00-\u9fa5]{2,}$/;

    //调用函数
    check(inpQQ, regQQ);
    check(inpMoblie, regMobile);
    check(inpEmail, regEmail);
    check(inpTel, regTel);
    check(inpName, regName);

    function check(inp, regEx) {
        inp.onblur = function () {
            if (regEx.test(this.value)) {
                this.nextSibling.innerHTML = "输入正确";
                this.nextSibling.className = "right";
            } else {
                this.nextSibling.innerHTML = "输入错误";
                this.nextSibling.className = "wrong";
            }
        };
    }
</script>
</body>
</html>

ITzhongzi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js正则表达式案例之表单验证

html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle>head>style type="text/css"> body { background: #ccc; } label { width: 40px; display
复制链接

扫一扫