模拟输入事件

最新推荐文章于 2023-10-19 09:22:32 发布

honkaiimpac

最新推荐文章于 2023-10-19 09:22:32 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/mei12656276/article/details/86617632

版权

<!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 for="qq">QQ</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>
var qq =document.getElementById("qq");
var phone =document.getElementById("phone");
var mail=document.getElementById("e-mail");
var telephone=document.getElementById("telephone")
var fullName=document.getElementById("fullName")
var span=document.getElementsByTagName("span");

console.log(span);
qq.onblur=function () {
var reg =/[1][0-9]{9}/
    if(qq.value.length==10) {
        if (reg.test(qq.value)) {
            span[0].innerHTML = "输入正确"
        } else {
            span[0].innerHTML = "输入错误"
        }
        if (qq.value.length == 0) {
            span[0].innerHTML = ""
        }
    }else{
        span[0].innerHTML = "输入错误"
    }
}
phone.onblur=function () {
var reg =/([1][358][0-9]{9})|([1][7][0137][0-9]{8})/
if(reg.test(phone.value)){
   span[1].innerHTML="输入正确"

}else{
    span[1].innerHTML="输入错误"
}
    if (phone.value.length==0) {
        span[1].innerHTML=""
    }
}
mail.onblur=function () {
var reg =  /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
if(reg.test(mail.value)){
    span[2].innerHTML="输入正确"

}else{
    span[2].innerHTML="输入错误"
}
    if (mail.value.length==0) {
        span[2].innerHTML=""
    }
}
telephone.onblur=function () {
var reg =/0\d{2}-\d{7,8}/
if(reg.test(telephone.value)){
    span[3].innerHTML="输入正确"

}else{
    span[3].innerHTML="输入错误"
}
    if (telephone.value.length==0) {
        span[3].innerHTML=""
    }
}
fullName.onblur=function () {
var reg =/[\u4e00-\u9fa5]{2,3}/
if(reg.test(fullName.value)){
    span[4].innerHTML="输入正确"

}else{
    span[4].innerHTML="输入错误"
}
    if (fullName.value.length==0) {
        span[4].innerHTML=""
    }
}


</script>

</body>
</html>