js点单验证

最新推荐文章于 2023-07-19 16:16:06 发布

Gui_wawa

最新推荐文章于 2023-07-19 16:16:06 发布

阅读量326

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Gui_wawa/article/details/52875708

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>

</head>

<body>
<div class="container" id="dv">
    <label>Q Q</label><input type="text" id="qq"><span></span><br/>
    <label>手机</label><input type="text" id="phone"><span></span><br/>
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
    <label>座机</label><input type="text" id="telephone"><span></span><br/>
    <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>

    //获取每个文本框验证这个文本框中的内容是否匹配,如果匹配则在后面的span标签中有正确的提示,如果错就提示输入错误

    /**
     * QQ:    /^[1-9][0-9]{5,11}$/
     * 手机: /^[1][345678][0-9]{9}$/
     * xiaoyang@126.com
     * 邮箱:   /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_]+([.][a-zA-Z]+){1,2}$/
     * 座机: /^[0][0-9]{2,3}[-][0-9]{7,8}/
     *
     * 姓名: /[\u4e00-\u9fa5]{2,3}/
     *
     *
     *
     *
     *
     */


    //第一步 写正则表达式

    //第二步 获取文本框
    var qq=document.getElementById("qq");
    function checkText(element,reg){
        element.οnblur=function(){
            if(reg.test(this.value)){
                this.nextElementSibling.innerHTML="输入正确";
                this.nextElementSibling.style.color="green";
            }else{
                this.nextElementSibling.innerHTML="输入不正确";
                this.nextElementSibling.style.color="red";
            }
        };
    }
    console.log(checkText(qq, /^[1-9][0-9]{5,11}$/));
</script>



</body>
</html>