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

2022/2/5 14:43:02

编程Tag： JavaScrip 表单 return && var Num arr 以及 charStr

本文主要是介绍javascrip中字符串验证码以及练习题目以及敏感词过滤以及表单验证，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

验证码：验证你是否是机器人
纯数字组成的验证：非常容易破解 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>

请添加图片描述



这篇关于javascrip中字符串验证码以及练习题目以及敏感词过滤以及表单验证的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程