专门做正品的网站有哪些,免费大数据网站,wordpress技术站主题,.net网站开发源码注释一、页面展示与交互功能表单提交与验证#xff08;含密码强度验证#xff09;实现带密码强度验证的表单提交功能#xff0c;使用正则表达式检查密码复杂度#xff1a;form bindsubmitsubmitForminput nameusername placeholder请…一、页面展示与交互功能表单提交与验证含密码强度验证实现带密码强度验证的表单提交功能使用正则表达式检查密码复杂度
form bindsubmitsubmitForminput nameusername placeholder请输入用户名 /input namepassword placeholder请输入密码 typepassword bindinputcheckPasswordStrength /!-- 密码强度提示 --view classpassword-strength密码强度{{passwordStrength}}/viewbutton form-typesubmit提交/button
/formPage({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: noneduration: 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位长度中级要求包含数字、小写字母、大写字母中的至少两种高级要求同时包含数字、小写字母、大写字母和特殊字符(!#$%^*)实时反馈随着用户输入实时更新密码强度提示提交验证最终提交时强制检查是否符合高级要求
