字符串长度限制

最新推荐文章于 2024-07-20 03:55:11 发布

hsdjhaiwhdnjw

最新推荐文章于 2024-07-20 03:55:11 发布

阅读量3.1k

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/qq_41604686/article/details/92773224

版权

总结专栏收录该内容

34 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            border: 0;
            border: 1px solid #ccc;
            width: 300px;
            height: 30px;
            margin: 10px;
            /*获取插入条之后的蓝色外边框去除*/
            outline-style: none;
            padding-left: 10px;
            font-size: 18px;
        }
        .wrong {
            border: 1px solid red;
        }
        .wrong-span {
            color: red;
            height: 30px;
            line-height: 30px;
        }
    </style>

</head>
<body>
账号:<input type="text"><span></span><br>
密码:<input type="text"><span></span>

</body>
<script>
    /*
     * 需求：
     *   如果输入为空  则提示用户 请您输入内容
     *   如果输入的字符长度 不够6位 或者大于20个字符  则提示字符长度错误
     *   如果输入正确   提示恭喜您输入正确
     *
     * */
    // 1 先获取需要的元素
    /*var aInp=document.getElementsByTagName("input");
    var aSpan=document.getElementsByTagName("span");
    aInp[0].focus();
    aInp[0].οnblur= function () {
        if(this.value==""){
            alert("请您输入内容");
        }else{

        if(this.value.length<6 ||this.value.length>20){
            this.className=("wrong");
            aSpan[0].className=("wrong-span");
            aSpan[0].innerHTML="您输入的字符长度必须在6--20个字符之间"
        }else {
            this.className="";
            aSpan[0].className="";
            aSpan[0].innerHTML="恭喜"
        }
        }
    }*/

    //获取元素
    var oInp=document.getElementsByTagName("input");
    var oSpan=document.getElementsByTagName("span");
    oInp[0].focus();
    oInp[0].οnblur=function (){
        if(this.value.length==""){
            alert("请输入内容")
        }else{
            if(this.value.length>=6 && this.value.length<=20){
                this.className="";
                oSpan[0].className=""
                oSpan[0].innerHTML="恭喜"

            }else{

                this.className="wrong";
                oSpan[0].className="wrong-span";
                oSpan[0].innerHTML="您输入的字符长度必须在6--20个字符之间"
            }
        }


    }


</script>
</html>