MS管理系统之验证码功能笔记2。

新人菜鸟请多多指教

已于 2024-01-14 20:33:14 修改

阅读量386

点赞数 10

分类专栏： MS管理系统文章标签：笔记前端 html javascript

于 2024-01-06 10:38:22 首次发布

本文链接：https://blog.csdn.net/cx12xc/article/details/135422796

版权

MS管理系统专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、可规定生成几位随机数验证码的JavaScript代码。新增功能：用户点击更新验证码。

2、目前还没有验证验证码是否正确的功能，后续会添加。

下面代码是单独的生成验证码的一个功能，可以随意添加到你的项目之中：

<!DOCTYPE html>  
<html>  
<head>  
  <title>生成随机字符串</title>  
</head>
  <script>  
     function generateRandomString(length) { //公共函数，生成随机验证码的函数。
                var result = '';
                var arr = [1, 2, 3, 4, 5,6,7,8,9,0]; // 包含多个元素的数组
                var str = "abcdefjhijklmnopqrstuvwxyz"; // 26个字母的字符串
                var str1=str.toUpperCase();//把26个小写字母转换为大写字母

                var characters=((arr.concat(str)).concat(str1)).join('');
                //连接arr、str和str1 并使用join()函数去除连接符(逗号)

                var charactersLength = characters.length; 
                //统计新组成的characters字符串的长度，为后续生成随机验证码做准备

                for (var i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() *charactersLength));

                }
                return result;
              }
        window.onload=function(){
                    //当用户进入页面后，调用函数generateRandomString()更新验证码。
                    var randomString = generateRandomString(4);
                    var input = document.getElementById('captcha').value=randomString;
                };
        function userClick(){
                    //当用户点击验证码按钮后，调用函数generateRandomString()更新验证码。
                var randomString = generateRandomString(4);
                var input = document.getElementById('captcha').value=randomString;
	}
  </script>    
<body>  
   <input type="button" id="myInput"> 
</body>  
</html>

下面的图片是我添加到我的项目，用户进入页面所呈现的结果：

下面的图片是我添加到我的项目，用户点击验证码按钮所呈现的结果：

3、缺点：样式太单调，功能不全面。

后续会添加其他样式和功能，尽我所能完善用户要求。

欢迎各位大佬的到来，请多多指教。我是菜鸟，喜欢就好。

新人菜鸟请多多指教

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
MS管理系统之验证码功能笔记2。

1、可规定生成几位随机数验证码的JavaScript代码。2、目前还没有验证验证码是否正确的功能，后续会添加。后续会添加其他样式和功能，尽我所能完善用户要求。欢迎各位大佬的到来，请多多指教。3、缺点：样式太单调，功能不全面。下面的图片是我添加到我的项目，下面的图片是我添加到我的项目，
复制链接

扫一扫