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

已于 2024-10-28 10:48:42 修改
阅读量682 收藏 12
点赞数 6
文章标签： 前端 javascript 密码校验
于 2024-10-17 14:54:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43291759/article/details/143018748
版权

前端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 }，否则返回包含错误信息的对象。

全部代码

/* 
    首先 
    1、不能横向 竖向 连续三个 包含字符   qaz zaq 123 111 321 951 159 [;, =-0 8uh  %%% $$$ ^^^
    2、数字 字母不能连续 不能相同三个 aaa 111 
    3、不能包含在用户名中 任意连续三个字符 username  passwardname 
    4、只支持英文符号 过滤中文符号比如 。 、 ， ‘ “ 【 】 · 、等
    5、用户名限制最低长度，最低5个字符
    6、不能包含中文符号
*/

// 所有键盘组合值
// 三个连续的 纵向的 横向的 相同的 数字 字母 符号
let charAll = [];

// 所有的中文符号
const allChinaChar = [
  "·",
  "【",
  "】",
  "；",
  "：",
  "’",
  "”",
  "“",
  "‘",
  "，",
  "。",
  "、",
  "？",
  "《",
  "》",
  "！",
  "￥",
  "…",
  "（",
  "）",
  "—",
];

/**
 * 键盘字符表(小写)
 * 非shift键盘字符表
 */
const charList1 = [
  ["`", "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 charList2 = [
  ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "+", ""],
  ["", "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));
};

/**
 *
 * @returns 返回键盘所有符合条件的集合
 */
function getCharAll() {
  charAll = [];
  // 横向所有的值(正序和反序)-
  charList1.concat(charList2).forEach((item, index) => {
    charAll.push(item.join(""), Object.assign([], item).reverse().join(""));
  });
  // 0: "`1234567890-="
  // 1: "=-0987654321`"
  // 反斜杠纵向所有的值(正序和反序)\
  // 这里得到的数据例如是 1qaz 2wsx 3edc
  for (let i = 0; i < charList1[0].length; i++) {
    let sb1 = [];
    let sb2 = [];
    charList1.forEach((item) => {
      sb1.push(item[i]);
    });
    charList2.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(""));
    }
  }
  // return false
  // 正斜杠纵向所有的值(正序和反序)/
  // 这里得到的数据例如是 0okm 9ijn 8uhb 7ygv
  for (let i = 0; i < charList1[0].length; i++) {
    let sb1 = [];
    let sb2 = [];
    //   比如说 当前i === 8
    // 那也就是说charList1[0]选中的是 8
    // 那也就是说charList1[1]应该选中的是 u  i-下标（1）等于7  正好是u
    // 那也就是说charList1[2]应该选中的是 h  i-下标（2）等于6  正好是h
    // 那也就是说charList1[3]应该选中的是 b  i-下标（3）等于5  正好是b
    charList1.forEach((item, index) => {
      if (i - index >= 0) sb1.push(item[i - index]);
    });
    charList2.forEach((item, index) => {
      if (i - index >= 0) sb2.push(item[i - index]);
    });
    // 去除长度小于3的值
    if (sb1.join("").length >= 3) {
      charAll.push(sb1.join(""), Object.assign([], sb1).reverse().join(""));
      charAll.push(sb2.join(""), Object.assign([], sb2).reverse().join(""));
    }
  }
  //   aaa 111 %%%
  const chart26 = "abcdefghijklmnopqrstuvwxyz";
  const str = chart26 + "1234567890" + SpecialStr;
  let strList = [];
  // 这里也可以直接使用 charList1和charList2去重然后再循环
  for (let i = 0; i < str.length; i++) {
    strList = [...strList, str[i] + str[i] + str[i]];
  }
  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)];
  //  两个长度去重之后 长度不相等 说明有重合的 直接毙掉
  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();
  if (charAll.some((i) => password.includes(i))) {
    return {
      flag: false,
      message: "密码不能包含包含连续或键盘横竖三位的数字、字母、字符",
    };
  }
  return {
    flag: true,
  };
};

export default {
    checkPasswordFun
}

使用：

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

在这里插入图片描述

在这里插入图片描述
上述所有情况 已经全部通过

shell实例手册
yonggeit的博客
05-27 6387
shell实例手册 1文件{ touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2unix # windows文本转linux文本 unix2dos # linux文本转windows文本 enca filename ...
判断密码是否包含键盘连续字符【灭霸级】
黔家仔的博客
10-10 5198
灭霸级别，手套呢？
JS验证输入的字符是否为重复或连续字母数字字符
dengchi5635的博客
04-18 908
function CheckPass(strText) { strText = strText.toUpperCase(); strText = strText.replace(/[ ]/g, ""); var str1 = "01234567890"; var str2 = "09876543210"; var str3 = "ABCDEFGHIJKLMN...
JavaScript实现密码强度实时验证
10-15
主要为大家详细介绍了JavaScript实现密码强度实时验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS密码正则验证(不能连续字符（如123、abc）连续3位或3位以上)(不能相同字符（如111、aaa）连续3位或3位以上)
qq_49080170的博客
08-04 4137
JS密码正则验证(不能连续字符（如123、abc）连续3位或3位以上)(不能相同字符（如111、aaa）连续3位或3位以上)
前端正则校验密码强度（弱中强）
山有木兮木有枝 心悦君兮君不知
12-25 7624
//密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); //密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 var mediumRegex = new RegExp("^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[...
前端如何校验密码的强度。Naive UI
weixin_59691605的博客
08-10 880
前端如何校验密码的强度
Java实现登录密码强度校验
道小生的博客
09-21 3340
Java通过两种方式实现登录密码强度校验
2、测试面试题总结整理
qq_45778920的博客
08-08 3956
分享学习，享受快乐(*^▽^*)
Vue3项目炫酷实战，检测密码强度值
xingyu_qie的专栏
06-03 3057
在前端项目开发中，确保用户密码的强度是保护账户安全的重要措施。本文将演示如何使用Vue 3实现一个简单的密码强度检测功能。通过实时反馈，帮助用户创建更安全的密码，从而提升整体系统的安全性。无论您是前端开发新手还是经验丰富的开发者，都可以从中学到如何有效地在项目中应用密码强度检测技术。
注册时密码强度验证代码
08-10
密码强度验证代码，用户注册时用来查看输入密码的强度
javascript密码强度校验代码（两种方法）
10-23
为了保证网站个人信息的安全，很多网站在注册页面都设置密码强度这项，用javascript如何实现密码强度校验代码呢？下面小编给大家整理了两种方法使用javascript密码强度校验代码，有需要的朋友可以参考下
弱密码校验
wch19960518的博客
05-06 1234
弱密码校验
JavaScript 密码强度校验方法：支持数字、大小写字母和特殊字符
最新发布
qq_41205754的博客
02-08 360
密码强度校验是注册和登录流程中不可或缺的功能。本文分享了一种简洁高效的 JavaScript 方法，通过校验数字、小写字母、大写字母和特殊字符，快速评估密码的强度等级。代码采用现代化写法，优化可读性和维护性，并附详细的示例，适合各种前端场景
js正则验证不能有中文和空格
小明的博客
12-02 1万+
拷贝即用
密码校验规则(不能包含3个及以上键盘连续字符)PHP
热门推荐
zyh2468的博客
11-10 1万+
密码校验规则(不能包含3个及以上键盘连续字符)PHP
js判断密码是否为键盘排序密码
weixin_30258901的博客
08-28 1499
/** * 键盘连续字符统计3个 * @param str * @return */ function _isKeyBoardContinuousChar(str) { var c1 = [ ...
密码复杂性校验之：密码不得包含键盘上任意连续的四个字符或shift转换字符
u010069011的博客
10-26 7091
//密码不得包含键盘上任意连续的四个字符或shift转换字符 public static boolean validateKey(String str) { //定义横向穷举 String[][] keyCode = { {"`~·", "1=", "2@@", "3#", "4$￥", "5%", &q
weakPassword校验工具
weixin_46822367的博客
10-13 556
weakPassword校验工具 package com.dimpt.base.util; import java.util.regex.Matcher; import java.util.regex.Pattern; public class PasswordUtil { /** * 验证通过 */ private static final Boolean THROUGH = true; /** * 验证不通过 */ privat
在form表单中校验密码必须包含字母、数字和特殊字符，且密码不能包含连续数字
10-31
在HTML表单中，验证密码是否满足特定条件通常涉及到前端JavaScript和服务器端的配合。为了确保密码包含字母、数字和特殊字符，并且不包含连续的数字，可以采取以下步骤： 1. **前端验证**: - 使用`type="password"`创建输入字段。 - JavaScript事件监听如`onkeyup`或`onchange`，当用户输入时检查密码。 - 利用正则表达式 (regex) 检查密码规则，例如： ```javascript function validatePassword(input) { const regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; if (!regex.test(input.value)) { alert('密码必须包含字母、数字和特殊字符，且长度不少于8位，不可连续包含数字'); return false; } return true; } input.addEventListener('input', validatePassword); ``` 2. **后端验证**: - 后端服务（如Node.js, PHP等）会再次检查这个规则，因为前端验证可能存在绕过的情况。 - 可以通过发送POST请求到服务器，将密码作为参数，让服务器来进行更严格的检查。 **相关问题--:** 1. 如何在后端PHP中添加类似验证？ 2. 如果前端验证失败，如何阻止提交表单？ 3. 是否有现成的库或框架可以帮助处理这种复杂的前端密码验证？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值