记录一个复杂密码前端校验思路（可用）

记录一个复杂密码校验思路

要求密码长度，n个大写、n个特殊字符、n个数字

适用：ElementUI 、NaiveUI

本质：组件配置 + 正则

ElementUI

ElementUI、NaiveUI 组件思路差不多

interface PwdRule {
	passwordNLength: number,
	passwordNSymbol: number,
	passwordNLetter: number,
	passwordNNum: number,
}
const pwdRule = ref<PwdRule>()

const rules = ref({
    oldPassword: [{required: true, message: "旧密码不能为空", trigger: "blur"}],
    newPassword: [{required: true, message: "新密码不能为空", trigger: "blur"}, {
      validator: validateNewPass,
      trigger: "blur"
    }],
    confirmPassword: [{required: true, message: "确认密码不能为空", trigger: "blur"}, {
      required: true,
      validator: equalToPassword,
      trigger: "blur"
    }]
  });
const validateNewPass = (rule, value, callback) => {
  let minLength = userStore.passwordRules.passwordNLength
  let minSpecialChars = userStore.passwordRules.passwordNSymbol
  let minUppercaseChars = userStore.passwordRules.passwordNLetter
  let minNum= userStore.passwordRules.passwordNNum

  if (value.length < minLength) {
    callback(new Error(`密码长度不低于${minLength}个字符。`));
  }
  // 检查特殊字符数量
  let specialChars = value.replace(/[a-zA-Z0-9]/g, '');
  if (specialChars.length < minSpecialChars) {
    callback(new Error(`设置为至少包含${minSpecialChars}个特殊字符`));
  }
  // 检查大写字母数量
  let uppercaseChars = value.replace(/[^A-Z]/g, '');
  if (uppercaseChars.length < minUppercaseChars) {
    callback(new Error(`设置为至少包含${minUppercaseChars}个大写字母`));
  }
  if (isAtLeastMinNumDigits(value, minNum) == false) {
    callback(new Error(`设置为至少包含${minNum}个数字`));
  }
  callback();
}

function isAtLeastMinNumDigits(password, minNum) {
  // 匹配字符串中的数字
  const regex = /\d/g;
  const digits = password.match(regex);

  // 计算字符串中数字的个数
  const numDigits = digits ? digits.length : 0;

  // 如果字符串中数字的个数大于等于 ${minNum}，则返回 `true`
  return numDigits >= minNum;
}

使用

<n-form
  ref="formRef" :model="model"
  :rules="rules">
	<n-form-item label="密码" path="password" class="mt-[20px]">
	  <n-input
	      v-model:value="model.password"
	      type="password"
	      show-password-on="click"
	      placeholder="密码">
	  </n-input>
	</n-form-item>
</n-form>

<div>
  <n-button type="primary" class="submit_btn" @click="submitForm">
    提交
  </n-button>
</div>

ajax请求

  function submitForm() {
    formRef.value?.validate((errors) => {
      if (!errors) {
        submitRegisteerApi(model.value).then((res) => {
          message.success('注册成功,前往登录！')
          router.push('/account/login')
        }).catch((err) => {
          message.error(err.msg)
        })
      }
    })
  }

NaiveUI

NaiveUI 和饿了么ui很相似。差别就是 new Error

const rules = {
    username: [
      {required: true, message: '必填项',trigger: ['input', 'blur']},
      {message: '手机号格式错误', pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, trigger: ['input', 'blur']},
    ],
    password: [
      {
        required: true,
        validator(rule: FormItemRule, value: string) {
          const minLength = pwdRule.value?.passwordNLength
          const minSpecialChars = pwdRule.value?.passwordNSymbol
          const minUppercaseChars = pwdRule.value?.passwordNLetter
          const minNum= pwdRule.value?.passwordNNum
          if (!value) {
            return new Error('必填项')
          }

          if (value.length < minLength) {
             return new Error(`密码长度不低于${minLength}个字符。`);
          }
          // 检查特殊字符数量
          let specialChars = value.replace(/[a-zA-Z0-9]/g, '');
          if (specialChars.length < minSpecialChars) {
           return new Error(`设置为至少包含${minSpecialChars}个特殊字符`);
          }


          // 检查大写字母数量
          let uppercaseChars = value.replace(/[^A-Z]/g, '');
          if (uppercaseChars.length < minUppercaseChars) {
            return new Error(`设置为至少包含${minUppercaseChars}个大写字母`);
          }
          if (isAtLeastMinNumDigits(value, minNum) == false) {
            return new Error(`设置为至少包含${minNum}个数字`);
          }

          return true
        },

      },
    ],
    messageCode: [
      {required: true, message: '必填项',trigger: ['input', 'blur']},
    ],
  }

function isAtLeastMinNumDigits(password, minNum) {
  // 匹配字符串中的数字
  const regex = /\d/g;
  const digits = password.match(regex);

  // 计算字符串中数字的个数
  const numDigits = digits ? digits.length : 0;

  // 如果字符串中数字的个数大于等于 ${minNum}，则返回 `true`
  return numDigits >= minNum;
}

总结

• 记录了ElemetUI表单验证的一些使用模板
• 记录了密码规则的正则校验
• 是否有存在重大Bug自行甄别、若需要更复杂可以自行扩展
• 应该可以简化代码，自行研究
• 为啥要记录，因为不想重复造轮子，每个人多多少少都会实现，普通程序员效率才是王道