vue3 密码强度校验hook

import { ref, watch } from 'vue'

export function useValidation() {
  const input = ref<string>(''); // 输入框的值
  const hasLowerCase = ref<boolean>(false); // 是否包含小写字母
  const hasUpperCase = ref<boolean>(false); // 是否包含大写字母
  const hasNumber = ref<boolean>(false); // 是否包含数字
  const minLength = ref<boolean>(false); // 是否至少有8个字符

  watch(input, (newValue) => {
    hasLowerCase.value = /[a-z]/.test(newValue);
    hasUpperCase.value = /[A-Z]/.test(newValue);
    hasNumber.value = /\d/.test(newValue);
    minLength.value = newValue.length >= 8;
  });

  return {
    input,
    hasLowerCase,
    hasUpperCase,
    hasNumber,
    minLength
  }
}

import { defineComponent } from 'vue'
import { useValidation } from './useValidation'

export default defineComponent({
  setup() {
    const {
      input,
      hasLowerCase,
      hasUpperCase,
      hasNumber,
      minLength
    } = useValidation();

    return {
      input,
      hasLowerCase,
      hasUpperCase,
      hasNumber,
      minLength
    }
  },
  render() {
    return (
      <div>
        <input v-model={this.input} type="text" />
        <p>Has lower case: {this.hasLowerCase ? 'Yes' : 'No'}</p>
        <p>Has upper case: {this.hasUpperCase ? 'Yes' : 'No'}</p>
        <p>Has number: {this.hasNumber ? 'Yes' : 'No'}</p>
        <p>Min length 8: {this.minLength ? 'Yes' : 'No'}</p>
      </div>
    )
  }
})