javascript中字符串验证码以及练习题目以及敏感词过滤以及表单验证

九阈

已于 2022-02-05 15:49:11 修改

阅读量639

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2022-02-05 14:26:01 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/120940862

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

验证码：验证你是否是机器人
纯数字组成的验证：非常容易破解 6位数字验证码
数字和字符组成的验证码：
0~9
a~z 97~122
A~Z 65~90
随机：0~122
方法：
1、生成一个数组，装有的单个字符，长度62数字
随机0~61的下标
2、随机ASCII码值’
//n位验证码每一个数字的范围0~9 parseInt(Math.random()*10);

    <script>
        function numTestCode(n){
            var arr = [];//存储生成的数字
            for(var i=0;i<n;i++){
                var num=parseInt(Math.random()*10);
                arr.push(num);
            }
            return arr.join("");
        }
        alert(numTestCode(2));
    </script>

请添加图片描述

    <script>
        function testCode(n){
            var arr=[];
            for(var i=0;i<n;i++){
                var num=parseInt(Math.random()*123);
                if(num>=0&&num<=9){
                    arr.push(num);
                }else if(num>=97&&num<=122||num>=65&&num<=90){
                    arr.push(String.fromCharCode(num));
                }else{
                    i--;
                }
            }
            return arr.join("");
        }
        alert(testCode(6));
    </script>

请添加图片描述
随机生成验证码

function testCode(n){
    var arr=[];
    for(var i=0;i<n;i++){
        var num=parseInt(Math.random()*123);
        if(num>=0&&num<=9){
            arr.push(num);
        }else if(num>=97&&num<=122||num>=65&&num<=90){
            arr.push(String.fromCharCode(num));
        }else{
            i--;
        }
    }
    return arr.join("");
}
alert(testCode(6));

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 30px;border: 1px red solid;}
    </style>
    <script src='tool.js'></script>
    <script>
        //事件驱动函数
        //通过id获取页面上对应的标签
        //document.getElementById(id);
        //node.innerHTML 标签间的内容
        function btnClick(){
            //拿到div这个标签
            var oDiv=document.getElementById("div1");
            //alert(oDiv.innerHTML);取值
            //oDiv.innerHTML = '赋值'
            oDiv.innerHTML=testCode(6);
        }
    </script>
</head>
<body>
    <div id='div1'>000</div>
    <!-- 点击按钮，就会执行后面字符串中的代码 -->
    <button onclick = 'btnClick();'>获取验证码</button>
</body>
</html>

请添加图片描述

function testCode(n){
    var arr=[];
    for(var i=0;i<n;i++){
        var num=parseInt(Math.random()*123);
        if(num>=0&&num<=9){
            arr.push(num);
        }else if(num>=97&&num<=122||num>=65&&num<=90){
            arr.push(String.fromCharCode(num));
        }else{
            i--;
        }
    }
    return arr.join("");
}
alert(testCode(6));

字符串练习
(1)将字符串按照单词进行逆序，空格作为划分单词的唯一条件
传入：“Welcome to Beijing"改为”Beijing to Welcome”

    <script>
        /*将字符串按照单词进行逆序，空格作为划分单词的唯一条件
        传入："Welcome to Beijing"改为”Beijing to Welcome"
        */
       function reverseStr(str){
           var arr = str.split(" ");
           arr.reverse();
           return arr.join(" ");
       }
       alert(reverseStr("Welcome to Beijing"));
    </script>

请添加图片描述
(2)
对称数组
传入一个数组。其元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成
传入
[“one”,“two”,“three”]
返回
[“one”,“two”,“three”,“three”,“two”,“one”]

<script>
    function symmetryArr(arr){
        var newArr = arr.concat();
        for(var i = arr.length - 1; i >= 0; i--){
            newArr.push(arr[i]);
        }
        return newArr;
    }
    alert(symmetryArr(["one","two","three"]));
</script>

请添加图片描述
(3)
已知一个字符串对象中，英语单词用各种非字母字符分割，统计单词个数
传入:“Yes,she*is%my&love.”;
返回5
【规律】当前面一个字符是字母，后面一个是非字母的时候，这就是一个单词

<script>
    function countOfWord(str){
        var count = 0;
        for(var i = 0; i < str.length - 1; i++){
            if(isABC(str[i]) && !isABC(str[i + 1])){
                count++;
            }
        }
        return count;
    }
    alert(countOfWord("Yes,she*is%my&love."));
    //判断单个单词是否是字母
    function isABC(charStr){
        if(charStr >= "a" && charStr <= "z"|| charStr >= "A" && charStr <= "Z"){
            return true;
        }else{
            return false;
        }
    }
</script>

请添加图片描述
(4)
实现函数，查找子串出现的次数，返回字符串str中出现的substring的次数
传入:“abcabcabc” , “abc”
返回：3

<script>
    function countOfStr(supStr,subStr){
        var arr = supStr.split(subStr);
        return arr.length - 1;
    }
    alert(countOfStr("abcabcabc","abc"));
</script>

请添加图片描述
(5)
已知邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com,
判断一个字符串是否是一个邮箱，是返回true,不是返回false.com
mail@1000phone.com是
$mail@1000phone.com不是
mail@1000phone.comp不是

<script>
    function isEmail(email){
        //查找@符号的位置
        var index = email.indexOf("@");
        if(index == -1){
            return false;
        }else{
            var endStr = email.substring(index);
            if(endStr != "@1000phone.com"){
                return false;
            }else{
                //判断用户名是否符合数字字母下划线
                var username = email.substring(0,index);
                var isYes = true;//假设都符合
                for(var i = 0; i < username.length; i++){
                    if(!isDEF(username[i])){
                        isYes = false;
                        break;
                    }
                }
                return isYes;
            }
        }
    }
    //判断单个字符是否符合数字字母下划线
    function isDEF(charStr){
        if(charStr >= "a" && charStr <= "z" || charStr >= "A" && charStr <= "Z" || charStr >= "0" && charStr <= "9" || charStr == "_"){
            return true;
        }else{
            return false;
        }
    }
    alert(isEmail("mail@1000phone.com"));
</script>

请添加图片描述
字符串-敏感词过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #msg{width: 400px;height: 400px;border: 1px solid black;}
    </style>
    <script>
        /*
        敏感词过滤
        表单元素，获取其中内容，通过.value的属性
        双标签节点 innerHTML属性，获取标签间内容
        */
       //装有敏感词
       var arr = [/靠/ig,/tmd/ig,/nm/ig];
       function btnClick(){
           var oTxt = document.getElementById("txt1");
           var oMsg = document.getElementById("msg");
           var oValue = oTxt.value;
           for(var i = 0; i < arr.length; i++){
               oValue = oValue.replace(arr[i],"*");
           }

           oMsg.innerHTML = oValue;
           oTxt.value = '';
       }
    </script>
</head>
<body>
    <textarea name="" id="txt1" cols="30" rows="10"></textarea>
    <button onclick = 'btnClick();'>发布</button>
    <div id = 'msg'></div>
</body>
</html>

请添加图片描述

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 200px;height: 200px;background-color: lightblue;border: 1px solid black;text-align: center;}
        #div1 input{width: 100px;height: 30px;font-size: 18px;margin: 10px;}
        #div1 span{font-size: 14px;color: red;}
    </style>
    <script>
        /*事件驱动函数 onclick
                      onblur 失去焦点
        */
        function func(){
            var oUsername = document.getElementById("username");
            var oUsernameSpan = document.getElementById("username_span");

            //1 拿到输入框的内容
            var oValue = oUsername.value;

            //2 判断
            //《1》用户名长度是否符合要求
            if(oValue.length < 6 || oValue.length > 18){
                oUsernameSpan.innerHTML = "长度应为6~18个字符!";

                //<2>首字母是否是字母
            }else if(!isABC(oValue[0])){
                oUsernameSpan.innerHTML = "邮箱地址必须以英文字母开头";
            }else{
                //<3>是否都是数字、字母、下划线组成
                    var isYes = true;//假设符合要求
                    for(var i = 0; i < oValue.length; i++){
                        if(!isDEF(oValue[i])){
                            isYes = false;
                            break;
                        }
                    }
                    if(isYes){
                        oUsernameSpan.innerHTML = "恭喜，该邮件地址可注册";
                    }else{
                        oUsernameSpan.innerHTML = "邮件地址需由数字、字母、下划线组成";
                    }
            }
        }

            //判断单个字符是否是字母
    function isABC(charStr){
        if(charStr >= "a" && charStr <= "z" || charStr >= "A" && charStr <= "Z" ){
            return true;
        }else{
            return false;
        }
    }
    //判断单个字符是否符合数字字母下划线
    function isDEF(charStr){
        if(charStr >= "a" && charStr <= "z" || charStr >= "A" && charStr <= "Z" || charStr >= "0" && charStr <= "9" || charStr == "_"){
            return true;
        }else{
            return false;
        }
    }
    </script>
</head>
<body>
    <div id = 'div1'>
        <input id = 'username' type="text" placeholder="用户名" οnblur="func();">
        <span id = 'username_span'>表单验证</span>
        <input type="text" placeholder="密码">
    </div>
</body>
</html>

请添加图片描述

九阈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript中字符串验证码以及练习题目以及敏感词过滤以及表单验证

验证码：验证你是否是机器人纯数字组成的验证：非常容易破解 6位数字验证码数字和字符组成的验证码：0~9a~z 97~122A~Z 65~90随机：0~122方法：1、生成一个数组，装有的单个字符，长度62数字随机0~61的下标2、随机ASCII码值’//n位验证码每一个数字的范围0~9 parseInt(Math.random()*10); <script> function numTestCode(n){ var arr
复制链接

扫一扫

专栏目录