微信小程序功能 表单密码强度验证

一、页面展示与交互功能

表单提交与验证(含密码强度验证)

实现带密码强度验证的表单提交功能,使用正则表达式检查密码复杂度:

复制代码
<form bindsubmit="submitForm">
  <input name="username" placeholder="请输入用户名" />
  <input name="password" placeholder="请输入密码" type="password" bindinput="checkPasswordStrength" />
  
  <!-- 密码强度提示 -->
  <view class="password-strength">
    密码强度:{{passwordStrength}}
  </view>
  
  <button form-type="submit">提交</button>
</form>
复制代码
Page({
  data: {
    passwordStrength: '未输入'
  },
  
  // 实时检查密码强度
  checkPasswordStrength(e) {
    const password = e.detail.value;
    let strength = '弱'; // 默认弱
    
    // 密码强度正则规则:
    // 1. 长度至少8位
    // 2. 包含数字
    // 3. 包含小写字母
    // 4. 包含大写字母
    // 5. 包含特殊字符(!@#$%^&*)
    
    const lengthRule = /.{8,}/;
    const hasNumber = /\d/;
    const hasLowercase = /[a-z]/;
    const hasUppercase = /[A-Z]/;
    const hasSpecial = /[!@#$%^&*]/;
    
    // 验证规则并计算强度等级
    let score = 0;
    if (lengthRule.test(password)) score++;
    if (hasNumber.test(password)) score++;
    if (hasLowercase.test(password)) score++;
    if (hasUppercase.test(password)) score++;
    if (hasSpecial.test(password)) score++;
    
    // 根据得分设置强度描述
    if (password.length === 0) {
      strength = '未输入';
    } else if (score < 2) {
      strength = '弱(至少8位,包含数字和字母)';
    } else if (score < 4) {
      strength = '中(建议增加大小写字母组合)';
    } else {
      strength = '强';
    }
    
    this.setData({ passwordStrength: strength });
  },
  
  submitForm(e) {
    const formData = e.detail.value;
    
    // 用户名验证
    if (!formData.username) {
      wx.showToast({
        title: '用户名不能为空',
        icon: 'none'
      });
      return;
    }
    
    // 密码验证
    if (!formData.password) {
      wx.showToast({
        title: '密码不能为空',
        icon: 'none'
      });
      return;
    }
    
    // 密码强度最终验证
    const strongPasswordRule = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;
    if (!strongPasswordRule.test(formData.password)) {
      wx.showToast({
        title: '密码需8位以上,包含数字、大小写字母和特殊字符',
        icon: 'none'
        duration: 3000
      });
      return;
    }
    
    // 验证通过,提交表单
    wx.request({
      url: 'https://api.example.com/register',
      method: 'POST',
      data: formData,
      success: (res) => {
        if (res.data.success) {
          wx.showToast({ title: '注册成功' });
        } else {
          wx.showToast({
            title: '注册失败',
            icon: 'none'
          });
        }
      }
    });
  }
})

密码强度验证规则说明:

基础要求:至少8位长度

中级要求:包含数字、小写字母、大写字母中的至少两种

高级要求:同时包含数字、小写字母、大写字母和特殊字符(!@#$%^&*)

实时反馈:随着用户输入实时更新密码强度提示

提交验证:最终提交时强制检查是否符合高级要求

相关推荐
Js_cold1 天前
Notepad++使用技巧1
前端·javascript·fpga开发·notepad++
Js_cold2 天前
Notepad++常用设置
前端·javascript·fpga开发·notepad++
腾讯云qcloud07556 天前
腾讯位置商业授权微信小程序路线规划
notepad++
YuShiYue12 天前
【uni-app】自定义导航栏以及状态栏,胶囊按钮位置信息的获取
uni-app·notepad++
黑客飓风13 天前
当GitHub宕机时,我们如何协作?
github·notepad++
江湖有缘17 天前
【Docker项目实战】使用Docker部署Notepad轻量级记事本
docker·容器·notepad++
腾讯云qcloud075517 天前
腾讯位置商业授权微信小程序关键词输入提示
notepad++
一杯科技拿铁17 天前
Notepad++ 插件开发实战技术
notepad++
As331001018 天前
Notepad++ 插件开发实战:从入门到发布全指南
notepad++