前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号

简介: 该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。

前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号

功能概述:
这段 JavaScript 代码实现了一个密码校验功能,主要用于检查输入的密码是否符合特定的规则,同时也对用户名进行了一些基本的检查。
主要函数功能:

  1. validateFormat(val, min = 5, max = 16)

检查输入字符串的长度是否在指定范围内(默认为 5 到 16 位)。
通过正则表达式检查字符串中是否至少包含数字、小写字母、大写字母和特殊字符中的三种类型。

  1. isHasChinaCharFun(str)

检查输入字符串是否包含特定的中文符号(从 allChinaChar 数组中定义的符号)。

  1. getCharAll()

生成一个包含所有可能的键盘组合值的数组 charAll。包括横向、纵向(正序和反序)以及字母表的组合,还包括将长字符串分割成三个字符一组的各种组合,并去重。
最后还添加了小键盘的一些特定组合。

  1. overlappingSplitByThree(str, flag = true)

将输入字符串分割成三个字符一组的数组,如果 flag 为 true,则返回正序和反序的组合。

  1. checkNoChinese(str)

使用正则表达式检查字符串中是否不包含中文字符。

  • checkPasswordFun(password, username):
  • 检查用户名和密码是否为空,如果是则返回相应错误信息。
  • 检查用户名长度是否小于 5。
  • 检查密码中是否包含中文、中文特殊字符以及是否符合长度和字符类型要求。 检查密码是否包含用户名中的连续三个字符。
  • 检查密码是否包含连续三位数字、字母或字符(通过与 charAll
    数组进行比较)。如果密码不符合任何一项检查,则返回相应的错误信息,否则返回 { flag: true }。

整体流程:

  1. 首先对输入的用户名和密码进行基本的非空检查。
  2. 对于用户名,检查长度是否小于 5。
  3. 对于密码,进行一系列的检查:
  • 检查是否包含中文。
  • 检查长度和字符类型是否符合要求。
  • 检查是否包含中文特殊字符。 检查是否包含用户名中的连续三个字符。
  • 检查是否包含连续三位数字、字母或字符(通过与预先生成的键盘组合值数组进行比较)。 如果密码通过所有检查,则返回 { flag: true },否则返回包含错误信息的对象。

全部代码

// 字符相关性(连续3个):
// 1.键盘横竖,
// 2.26字母,
// 3.数字,
// 4.相同字符,
// 5.当前用户名
// 用户名限制最低长度,最低5个字符

/* 
    首先 
    1、不能横向 竖向 连续三个 包含字符
    2、数字 字母不能连续 不能相同三个
    3、不能包含在用户名中 任意连续三个字符
    4、只支持英文符号 过滤中文符号比如 。 、 , ‘ “ 【 】 · 、等
*/

// 保存所有相关性的三个连续的 纵向的 横向的 相同的 数字 字母 符号
// 单纯使用的时候 手动追加用户名
// 所有的中文符号
const allChinaChar = [
  "·",
  "【",
  "】",
  ";",
  ":",
  "’",
  "”",
  "“",
  "‘",
  ",",
  "。",
  "、",
  "?",
  "《",
  "》",
  "!",
  "¥",
  "…",
  "(",
  ")",
  "—",
];

/**
 * 键盘字符表(小写)
 * 非shift键盘字符表
 */
const charTable1 = [
  ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", ""],
  ["", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
  ["", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "", ""],
  ["", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "", "", ""],
];

/**
 * shift键盘的字符表
 */
const charTable2 = [
  ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "+", ""],
  ["", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "{", "}", "|"],
  ["", "a", "s", "d", "f", "g", "h", "j", "k", "l", ":", '"', "", ""],
  ["", "z", "x", "c", "v", "b", "n", "m", "<", ">", "?", "", "", ""],
];
// 所有符号集合
const SpecialStr = "`\[\]!@#$%^&*()\-=\;_+'/,." + '?":{
   }|<>\\'

// 长度需min-max位,数字、小写字母、大写字母、特殊字符,至少包含三种
// return true  为通过校验
function validateFormat(val, min = 5, max = 16) {
   
  console.log("val", val);
  if (val.length < min || val.length > max) {
   
    return false; // 长度不符合要求
  }

  const hasLower = /[a-z]/.test(val);
  const hasUpper = /[A-Z]/.test(val);
  const hasDigit = /\d/.test(val);
  const hasSpecial = /[`\[\]!@#$%^&*()\-=\;_+'/,.?":{}|<>\\]/.test(val); // 根据需要调整这个特殊字符集
  // const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(val);
  let typeCount = 0;
  if (hasLower) typeCount++;
  if (hasUpper) typeCount++;
  if (hasDigit) typeCount++;
  if (hasSpecial) typeCount++;

  return typeCount >= 3; // 至少包含三种类型的字符
}

// 是否包含中文符号
const isHasChinaCharFun = (str) => {
  return allChinaChar.some((i) => str.includes(i));
};

// 所有键盘组合值
let charAll = [];
function getCharAll() {
  charAll = [];
  // 横向所有的值(正序和反序)-
  charTable1.concat(charTable2).forEach((item, index) => {
    charAll.push(item.join(""), Object.assign([], item).reverse().join(""));
  });
  //   console.log(charAll, "charAll");
  //   console.log(charTable1, "charTable1");
  // 0: "`1234567890-="
  // 1: "=-0987654321`"
  // 2: "qwertyuiop[]\\"
  // 3: "\\][poiuytrewq"
  // 4: "asdfghjkl;'"
  // 5: "';lkjhgfdsa"
  // 6: "zxcvbnm,./"
  // 7: "/.,mnbvcxz"
  // 8: "~!@#$%^&*()_+"
  // 9: "+_)(*&^%$#@!~"
  // 10: "qwertyuiop{}|"
  // 11: "|}{poiuytrewq"
  // 12: 'asdfghjkl:"'
  // 13: '":lkjhgfdsa'
  // 14: "zxcvbnm<>?"
  // 15: "?><mnbvcxz"
  // 反斜杠纵向所有的值(正序和反序)\
  // 这里得到的数据例如是 1qaz 2wsx 3edc
  for (let i = 0; i < charTable1[0].length; i++) {
   
    let sb1 = [];
    let sb2 = [];
    charTable1.forEach((item) => {
   
      sb1.push(item[i]);
    });
    charTable2.forEach((item) => {
   
      sb2.push(item[i]);
    });
    // 去除长度小于3的值
    if (sb1.join("").length >= 3) {
   
      charAll.push(sb1.join(""), Object.assign([], sb1).reverse().join(""));
      charAll.push(sb2.join(""), Object.assign([], sb2).reverse().join(""));
    }
  }
  // console.log(charAll,'charAll6666')
  // return false
  // 正斜杠纵向所有的值(正序和反序)/
  // 这里得到的数据例如是 0okm 9ijn 8uhb 7ygv
  for (let i = 0; i < charTable1[0].length; i++) {
   
    let sb1 = [];
    let sb2 = [];
    //   比如说 当前i === 8
    // 那也就是说charTable1[0]选中的是 8
    // 那也就是说charTable1[1]应该选中的是 u  i-下标(1)等于7  正好是u
    // 那也就是说charTable1[2]应该选中的是 h  i-下标(2)等于6  正好是h
    // 那也就是说charTable1[3]应该选中的是 b  i-下标(3)等于5  正好是b
    charTable1.forEach((item, index) => {
   
      if (i - index >= 0) sb1.push(item[i - index]);
    });
    // console.log(sb1, "sb1 ==================");
    charTable2.forEach((item, index) => {
   
      if (i - index >= 0) sb2.push(item[i - index]);
    });
    // console.log(sb2, "sb2sb2sb2sb2sb2");
    // 去除长度小于3的值
    if (sb1.join("").length >= 3) {
   
      charAll.push(sb1.join(""), Object.assign([], sb1).reverse().join(""));
      charAll.push(sb2.join(""), Object.assign([], sb2).reverse().join(""));
    }
  }
  const chart26 = 'abcdefghijklmnopqrstuvwxyz'
  const str =chart26+ '1234567890'+SpecialStr
  let strList = []
  for(let i =0;i<str.length;i++){
   
    strList = [...strList,str[i]+str[i]+str[i]]
  }
//   console.log(...overlappingSplitByThree(chart26),'999999999999999')
  charAll.push("abcdefghijklmnopqrstuvwxyz",...strList,);
  // 将得到的所有字符组合 以上都是超过三位的组合
  // 目前的要求是超过三位包含三位都算连续 比如 qaz 1qa aq1 zaq 还需要在处理一下...
  // 如果不需要 跳过这个循环就行
  charAll.forEach((item) => {
   
    if (item.length > 3) {
   
      charAll.push(...overlappingSplitByThree(item));
    }
  });

  // 去重
  charAll = [...new Set(charAll)];
  //  增加小键盘 123 456 789
  //  charAll.push("159", "951", "753", "357");
  charAll.push("147", "741", "258", "852", "369", "963");
  return charAll;
}

//  将字符串三个三个一组
// 例如 "asdfghbvcx"  输出: "asd,sdf,dfg,fgh,ghb,hbv,bvc,vcx"
/**
 *
 * @param {*} str 要分割的字符
 * @param {*} flag 默认true 加上反转
 * @returns
 */
function overlappingSplitByThree(str, flag = true) {
   
  const result = [];
  for (let i = 0; i <= str.length - 3; i++) {
   
    result.push(str.slice(i, i + 3));
  }
  // 如果需要返回逗号分隔的字符串,可以使用 join 方法
  // return result.join(',');
  // 但这里按照要求返回数组
  return flag ? [...result,...overlappingSplitByThree(str.split('').reverse().join(''),false)] : [...result];
}
/**
 *
 * @param {*} str
 * @returns 含有中文返回 false
 */
function checkNoChinese(str) {
   
  const regex = /^[^\u4e00-\u9fa5]+$/;
  return regex.test(str);
}


/**
 *
 * @param {*} password 密码
 * @param {*} username 用户名
 * @returns Object
 */
export const checkPasswordFun = (password, username,min=5,max=16) => {
   

  // 判断账号
  if (!username || username.trim() === "") {
   
    return {
   
      flag: false,
      message: "请输入用户名",
    };
  }
  // 判断账号最小长度
  if (username.length <5) {
   
    return {
   
      flag: false,
      message: "用户名最小长度为5",
    };
  }
  // 判断密码是否存在
  if (!password || password.trim() === "") {
   
    return {
   
      flag: false,
      message: "请输入密码",
    };
  }
  if (!checkNoChinese(password)) {
   
    return {
   
      flag: false,
      message: "密码中不能包含中文",
    };
  }
  // 判断密码位数是否符合要求
  if (!validateFormat(password,min=5,max=16)) {
   
    return {
   
      flag: false,
      message:
        `密码长度为${
     min}-${
     max}位,数字、小写字母、大写字母、特殊字符,至少包含三种`,
    };
  }
  password = password.toLowerCase();
  username = username.toLowerCase();
  // 判断密码是否包含中文特殊字符
  if (isHasChinaCharFun(password)) {
   
    return {
   
      flag: false,
      message: "密码不能包含中文特殊字符",
    };
  }
  // 判断密码中是否包含用户名连续三位
  const passwordList = [...overlappingSplitByThree(password, false)];
  const usernameList = [...overlappingSplitByThree(username, false)];
    // console.log(passwordList, "passwordList");
    // console.log(usernameList, "usernameList");
    // console.log( passwordList.length + usernameList.length,' passwordList.length + usernameList.length')
    // console.log( [...new Set([...passwordList, ...usernameList])].length,' passwordList.length + usernameList.length')
  //  两个长度去重之后 长度不相等 说明有重合的 直接毙掉
  if([...new Set([...passwordList])].length !== passwordList.length){
   
    return {
   
        flag: false,
        message: "密码不能包含包含连续或键盘横竖三位的数字、字母、字符",
      };
  }
  if (
    passwordList.length + usernameList.length !==
    [...new Set([...passwordList, ...usernameList])].length
  ) {
   
    return {
   
      flag: false,
      message: "密码不能包含账号字符连续三位、",
    };
  }

  // 判断密码中是否包含连续三位数字 字母 字符
  const charAll = getCharAll();
//   console.log(charAll,'charAll 999999999999')
//   console.log(password.includes('abc'),'password 999999999999')
  if (charAll.some((i) => password.includes(i))) {
   
    return {
   
      flag: false,
      message: "密码不能包含包含连续或键盘横竖三位的数字、字母、字符",
    };
  }
  return {
   
    flag: true,
  };
};
AI 代码解读

使用:

import {
   checkPasswordFun} from "@/utils/checkPasswordFun";
window.checkPasswordFun =checkPasswordFun
console.log(checkPasswordFun('1az?ha好的ngjq','zh1aausangwerName'),'898888888888888')
AI 代码解读

image.png

目录
打赏
0
0
0
0
95
分享
相关文章
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
9天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
在数字化时代,共享文件的安全性至关重要。本文聚焦Node.js环境,介绍如何通过JavaScript对象字面量构建数据结构管理文件安全信息,包括使用`bcryptjs`库加密密码和权限校验算法,确保高效且安全的文件共享。通过实例代码展示加密与权限验证过程,帮助各行业实现严格的信息资产管理与协作。
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
129 1
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
75 4
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
126 5

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    32
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    61
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    巧用通义灵码,提升前端研发效率
    93
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    144
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等