从留言板开始做网站（九）——简单的验证码和CSS选择器优先级

最新推荐文章于 2022-03-09 22:30:16 发布

义乌小白

最新推荐文章于 2022-03-09 22:30:16 发布

阅读量1k

点赞数 1

分类专栏：学习做网站文章标签： html 新手教程留言板 php 验证码

本文链接：https://blog.csdn.net/wu1234a/article/details/52779405

版权

学习做网站专栏收录该内容

11 篇文章 6 订阅

订阅专栏

基本上验证已经完成，但是我们应该还要添加一个验证码。说到这个东西我也没底，因为我在写的时候我并不会，是真的不会，所以我准备自己先鼓捣一番，成功了再将过程写出来，如果没成功，这系列文章到此为止，现在的验证码五花八门，不过还是从数字和字母组合的简单容易点开始。

我首先看了这篇博文里的代码，原来验证码好简单的说：JS生成验证码并验证

我把JS代码贴出来：

var code ; //在全局定义验证码   
//产生验证码  
window.onload = function createCode(){  
     code = "";   
     var codeLength = 4;//验证码的长度  
     var checkCode = document.getElementById("code");   
     var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
     'S','T','U','V','W','X','Y','Z');//随机数  
     for(var i = 0; i < codeLength; i++) {//循环操作  
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
        code += random[index];//根据索引取得随机数加到code上  
    }  
    checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写        
    if(inputCode.length <= 0) { //若输入的验证码长度为0  
        alert("请输入验证码！"); //则弹出请输入验证码  
    }         
    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("input").value = "";//清空文本框  
    }         
    else { //输入正确时  
        alert("^-^"); //弹出^-^  
    }             
}

他的HTML代码我就不贴啦，非常的简单，不过有个问题就是，按照原封不动的代码，在他的HTML中

<input type = "button" id="code" οnclick="createCode()"/>

作者的意思是想点击验证码就重新更换验证码，但是并不能实现。我就把原来的JS代码更改了下，将window.οnlοad=function creatCode(){...}分开写，这样也比较符合我自己的风格

var code ; //在全局定义验证码
//产生验证码
function createCode(){
     code = "";
     var codeLength = 4;//验证码的长度
     var checkCode = document.getElementById("code");
     var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
     'S','T','U','V','W','X','Y','Z');//随机数
     for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
        code += random[index];//根据索引取得随机数加到code上
    }
    console.log(code);
    checkCode.value = code;//把code值赋给验证码

}
//校验验证码
function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
    if(inputCode.length <= 0) { //若输入的验证码长度为0
        alert("请输入验证码！"); //则弹出请输入验证码
    }
    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误
        createCode();//刷新验证码
        document.getElementById("input").value = "";//清空文本框
    }
    else { //输入正确时
        alert("^-^"); //弹出^-^
    }
}
window.οnlοad=createCode;

现在点击验证码可以正常更换了，估计是因为这里的原因吧，具体是什么，我心里隐隐的知道，但是解释不出来

。

现在稍稍讲解下代码，估计大部分人应该也能看懂了，不过这里面我觉得某些地方应该修改下。按照我的风格，是要把HTML和JS分离的，所以把HTML里的onclickJS代码都删除，由JS代码里实现，虽然多费一点代码。

先把我们的留言板，增加一个验证码的内容。

<div class="form-group">
        <label for="code">验证码：</label>
        <input type="text" class="user_code" placeholder="验证码" alias="验证码">
        <input type="text" id="code" value="1234">
</div>

在最后那个Input里的value内容是我自己添加了，为了预览CSS效果，设置好后是要删除掉的。再来看下CSS样式：

.mes-send input.user_code {
    width: 10%;
}
#code {
    width: 4em;
    border:none;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #903;
}

在最初的时候，我是用.user_code { width: 10%; } 结果长度并没有改变，这是因为在前面有一条代码设定了input的长度：

.mes-send input[type="text"] {
    padding: 1px;
    width: 40%;
    border: 1px solid #b7b7b7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

这里涉及到一个优先的问题，我曾经看过一篇文章，但是已经忘记了是哪篇，不过幸好做了笔记。（找到这篇文章了： CSS知多少）

特指度 I-C-E计算公式：遇到一个id特指度加100，一个class加10，一个element加1。设置的样式高于继承的样式，不用考虑特指度。例如：

#div1{
     color:blue;
}
span{
     color:red;
}
<div id="div1">
     <span>ssss</span>
</div>
//结果ssss显示的为红色，不受特指度的影响

就拿我们现在的例子来说明，我最初设置的.user_code{.....}，是一个class，所以特指度为10，而.mes-send input[type="text"]，特指度为20，属性选择器与类选择器是同等级的（关于属性选择器的优先级，百度了好久才发现）

这张图可以看出来，不懂纬度没关系，我们可以根据前面的，第一行特指度为1000，第二行100，第三行10，第四行1，第五行0，即可。

但是我对此也表示怀疑这个的正确性，为啥这么说，因为，我后来将.user_code{...}更改为.mes-send .user_code{...}，这个特指度为20，和那个类选择器+属性选择器的特指度是同样的，但是宽度仍旧改变不了，还是呈现后者的宽度设定，所以我觉得属性选择器的特指度应该会比类选择器高一点，但是比ID选择器低，属性选择器的特指度应该在10-20之间，不包含（10和20），因为我试验过啦，不知道是否有大神可以解释下，其余的特指度我个人比较懒也不是大神，所以就没去测试。！important 添加了这个，优先级是最高的。

看下最终的样式：

我们把预置的验证码值删除，添加修改过的JS内容，其实修改的力度并不大。

现在有个问题，由于跟之前的JS有所冲突，需要把验证码显示的标签更改为<span></span>

<div class="form-group">
    <label for="code">验证码：</label>
   <input type="text" class="user_code" id="user_code" placeholder="验证码" alias="验证码">
   <span id="code"></span>
</div>

JS修为后的结果为：

var code ; //在全局定义验证码
//产生验证码
function createCode(){
     code = "";
     var codeLength = 4;//验证码的长度
     var checkCode = document.getElementById("code");
     var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
     'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u',
     'v','w','x','y','z');//随机数
     for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*random.length);//取得随机数的索引
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.innerHTML = code;//把code值赋给验证码
    checkCode.onclick = function(){
        createCode();
    }

}
//校验验证码
function validate(){
    var inputCode = document.getElementById("user_code").value;//取得输入的验证码
    inputCode = inputCode.toUpperCase(); //取得输入的验证码并转化为大写
    code = code.toUpperCase();//同时将显示的验证码转化为大写
    if(inputCode.length <= 0) { //若输入的验证码长度为0
        alert("请输入验证码！"); //则弹出请输入验证码
        return false;
    }
    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误
        createCode();//刷新验证码
        inputCode.innerHTML = "";//清空文本框
        return false;
    }
    else { //输入正确时
        return true;
    }
}
window.οnlοad=createCode;
var checkcode = document.getElementById("btn");
checkcode.οnclick=function(){// 提交表单，调用验证函数
    validate();
}

首先增加了小写的验证码

var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
     'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u',
     'v','w','x','y','z');//随机数

其次具体的数字更改为了按照数组的长度来取值，这样更为方便

var index = Math.floor(Math.random()*random.length);//取得随机数的索引

由于标签<span>是没有value的属性，所以用了innerHTML来更改内容。

checkCode.innerHTML = code;//把code值赋给验证码

因为我们要把HTML和JS分开，所以添加一个点击验证码就会重新刷新一组验证码内容

checkCode.onclick = function(){
        createCode();
    }

因为前面增加了小写的字母，所以如果出现小写的字母应该转化为大写，这样可以让用户输入大小写都可以，提升用户体验

var inputCode = document.getElementById("user_code").value;//取得输入的验证码
    inputCode = inputCode.toUpperCase(); //取得输入的验证码并转化为大写
    code = code.toUpperCase();//同时将显示的验证码转化为大写

用户提交表单时判断用户是否输入验证码以及验证码是否准确

var checkcode = document.getElementById("btn");
checkcode.οnclick=function(){
    validate();
}

在之前的代码中，我还添加了，提交成功之后跳出一个框提示，留言成功。这个比较简单，就不贴出啦，至于写在哪，新手朋友可以自己想一下。

写好之后无意中测试了下，发现了BUG，在输错验证码提交后，表单能够提交成功！！！好吧，这是因为在checkSubmit()函数内在提交表单时要增加验证码的方法，以此来判断表单要不要成功提交。

theForm.οnsubmit=function(){
        var inputs = this.elements;
        //循环输出表单元素
        for (var i = 0; i < inputs.length; i++) {
            //跳过表单提交按钮
            if (inputs[i].type == "submit") continue;
            //文本框为空，则表单提交失效
            if (inputs[i].value == "") {
                notice.innerHTML = inputs[i].placeholder + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }
        }
        return validate();
    }

我起初就把validate();添加进去，发现一点反应都没有，后来用console.log();查看了返回值，才想起来，该方法返回的只是flase，需要加个return才可以阻止表单提交。我在原来函数的条件语句内，在值为空时提交表单，显示提示信息。忘记说了需要把notice设为全局变量。

然后把验证码的跳框改为显示提示信息：

function validate(){
    var inputCode = document.getElementById("user_code").value;
    inputCode = inputCode.toUpperCase(); //取得输入的验证码并转化为大写
    code = code.toUpperCase();
    if(inputCode.length == 0) { //若输入的验证码长度为0
        notice.innerHTML= "验证码不得为空"; //则弹出请输入验证码
        notice.style.visibility = "visible";
        console.log(notice);
        return false;
    }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        notice.innerHTML= "验证码输入有误，请重新输入";
        notice.style.visibility = "visible";
        inputCode.innerHTML = "";//清空文本框
        return false;
    }else { //输入正确时
        alert("留言成功");
        notice.style.visibility = "hidden";
        return true;
    }
}

完整的JS代码，包括之前的输入验证：

//获得信息提示的DOM并设为全局变量
var notice = document.getElementById("notice");
// 文本框内容检查
function checkInputs(theForm){
    //检查浏览器是否支持
    if (!document.getElementById) return false;
    //获得表单DOM
    var inputs = theForm.elements;
    //设置文本框的正则表达式
    var regex = /^[\u4E00-\u9FA5a-zA-Z0-9]{1,15}$/;
    //循环输出表单元素
    for (var i = 0; i < inputs.length; i++) {
        //跳过表单中的提交按钮
        if (inputs[i].type == "submit") continue;

        //文本框失去焦点
        inputs[i].οnblur=function(){
            //失去焦点，恢复预置文本
            var ph = this.alias || this.getAttribute("alias");
            this.setAttribute("placeholder",ph);
            //如果文本框为空
            if (this.value.length == 0) {
                //更改notice的文本内容，并显示
                notice.innerHTML=ph + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }else if (!regex.test(this.value) && this.type == "text"){//检查文本内容是否符合正则表达式
                notice.innerHTML = ph + "仅限中文和数字且不多于15个字符！";
                notice.style.visibility = "visible";
                return false;
            }else{
                notice.style.visibility = "hidden";
                return true;
            }
        }
        //文本框获得焦点
        inputs[i].οnfοcus=function(){
            this.setAttribute("placeholder","");
        }
    }
}
function checkSubmit(){
    //检查浏览器兼容
    if (document.forms.length < 1) return false;
    var theForm = document.forms[0];
    //运行checkInputs函数
    checkInputs(theForm);
    //处理表单提交
    theForm.οnsubmit=function(){
        var inputs = this.elements;
        //循环输出表单元素
        for (var i = 0; i < inputs.length; i++) {
            //跳过表单提交按钮
            if (inputs[i].type == "submit") continue;
            //文本框为空，则表单提交失效，并显示提示信息
            if (inputs[i].value == "") {
                notice.innerHTML = inputs[i].placeholder + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }
        }
        //检查验证码
        return validate();
    }
}

// 验证码
var code ; //在全局定义验证码
//产生验证码
function createCode(){
     code = "";
     var codeLength = 4;//验证码的长度
     var checkCode = document.getElementById("code");
     var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
     'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u',
     'v','w','x','y','z');//随机数
     for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*random.length);//取得随机数的索引（0~35）
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.innerHTML = code;//把code值赋给验证码
    checkCode.onclick = function(){
        createCode();
    }

}
//校验验证码
function validate(){
    var inputCode = document.getElementById("user_code").value;
    inputCode = inputCode.toUpperCase(); //取得输入的验证码并转化为大写
    code = code.toUpperCase();
    if(inputCode.length == 0) { //若输入的验证码长度为0
        notice.innerHTML= "验证码不得为空";
        notice.style.visibility = "visible";
        console.log(notice);
        return false;
    }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        notice.innerHTML= "验证码输入有误，请重新输入";
        notice.style.visibility = "visible";
        inputCode.innerHTML = "";//清空文本框
        return false;
    }else { //输入正确时
        alert("留言成功");
        notice.style.visibility = "hidden";
        return true;
    }
}
window.οnlοad=createCode;
checkSubmit();

义乌小白

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
从留言板开始做网站（九）——简单的验证码和CSS选择器优先级

用JS做了判断文本框内是否为空，现在还应该判断用户输入的值是否是恰当的值。修改checkInputs函数，增加正则判断的功能：function checkInputs(theForm){ //检查浏览器是否支持 if (!document.getElementById) return false; //获得表单DOM var inputs = theForm
复制链接

扫一扫