前端怎么校验密码复杂度才安全?

上官淑瑶 阅读 15

我在做用户注册页的密码校验,想确保密码包含大小写字母、数字和特殊字符,但不确定只在前端用正则判断够不够。万一用户绕过前端直接发请求怎么办?

现在用的是 Vue 的 watch 监听密码输入,代码大概这样:

<template>
  <input v-model="password" type="password" />
  <div v-if="!isValid">密码需包含大小写、数字和符号</div>
</template>

<script>
export default {
  data() {
    return { password: '' }
  },
  computed: {
    isValid() {
      const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/;
      return re.test(this.password);
    }
  }
}
</script>

但总觉得光靠这个不保险,后端肯定也要校验,那前端这层还有必要做这么严吗?还是说只是提升用户体验?

我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
Mr-亚龙
Mr-亚龙 Lv1
前端密码校验确实只能算锦上添花,后端必须得有完整的校验逻辑。前端主要是提升用户体验,让用户在输入时就能及时发现错误。

你现在的正则有个小问题:.*d 这里的 d 应该是 d 才对。建议改成:

const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/;


不过说实话,前端校验再严也没用,用户真要绕过太容易了。我以前就遇到过类似情况,有人直接抓包改数据,前端的校验形同虚设。

后端一定要做同样的校验,而且最好加些额外措施,比如限制登录次数、检测暴力破解等。至于前端要不要这么严格,我觉得简单提示下就够了,没必要太复杂。

记住一点:安全永远以后端为主,前端只是辅助。别把所有希望都寄托在前端校验上,不然迟早会踩坑。
点赞
2026-03-26 22:00