前端密码校验逻辑笔记

前端密码校验逻辑笔记：

1. 登录界面 (Login.vue)

在这个登录组件中，我们实现了对用户输入密码的实时验证，以确保密码的安全性和一致性。

2. 数据模型与响应式属性

// 定义响应式数据模型
const registerData = ref({
  username: '',
  password: '',
  rePassword: '',
});

这里的registerData是一个Vue的响应式对象，用于存储用户在注册表单中输入的用户名、密码和确认密码。当用户在表单中输入时，这些值会实时更新。

3. 自定义密码匹配验证

// 自定义密码匹配验证函数
const checkRePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== registerData.value.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};

checkRePassword函数用于验证用户输入的确认密码是否与密码字段的值相同。当用户在确认密码字段失去焦点时，此函数会被调用。通过比较两次输入的密码是否一致来决定是否通过验证。如果不一致或确认密码为空，函数会通过callback传回错误信息。

4. 表单验证规则

//定义表单校验规则
const rules = {
    username:[
        {required:true,message:'请输入用户名',trigger:'blur'},
        {min:5,max:16,message:'长度为5~16位非空字符',trigger:'blur'}
    ],
    password:[
        {required:true,message:'请输入密码',trigger:'blur'},
        {min:5,max:16,message:'长度为5~16位非空字符',trigger:'blur'}
    ],
    rePassword:[
        {validator:checkRePassword,trigger:'blur'}
    ]
}

rules对象定义了每个字段的验证规则，包括用户名和密码的非空和长度限制，以及确认密码与密码的一致性。所有验证在字段失去焦点时触发。

5. 模板与用户界面

在模板部分，我们使用了Element UI的表单组件创建了一个注册表单。表单字段与registerData模型绑定，并应用了之前定义的验证规则。当用户输入不符合规则时，会显示相应的错误提示。

通过这种方式，我们确保了用户在输入密码时能够得到及时的反馈，提高了用户体验。