js点单验证

来源:互联网 发布:手机淘宝如何修改差评 编辑:程序博客网 时间:2024/06/10 14:23
<!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.onblur=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>

0 0