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

一、页面展示与交互功能

表单提交与验证（含密码强度验证）

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

<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位长度

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

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

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

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