React Native 中实现含大小写、特殊字符检测的密码创建校验

核心思路 #

把密码的校验规则拆成独立的可配置项，通过正则匹配完成单条规则校验，同时返回所有不符合要求的错误提示，方便用户直观调整输入内容。

具体实现 #

1. 封装独立校验函数 #

首先定义通用的密码校验工具函数，可全局复用：

const validatePassword = (password) => {
  const errorList = [];
  // 可按需调整长度要求
  if (password.length < 8) {
    errorList.push("密码长度不能少于8位");
  }
  // 大写字母校验（大小写敏感）
  if (!/[A-Z]/.test(password)) {
    errorList.push("需包含至少1个大写字母");
  }
  // 小写字母校验
  if (!/[a-z]/.test(password)) {
    errorList.push("需包含至少1个小写字母");
  }
  // 特殊字符校验，可按需调整[]内的特殊字符范围
  if (!/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(password)) {
    errorList.push("需包含至少1个特殊字符");
  }
  return {
    valid: errorList.length === 0,
    errors: errorList
  };
};

2. 集成到React Native页面 #

把校验逻辑和TextInput绑定，实现实时校验：

import React, { useState } from "react";
import { View, TextInput, Text, StyleSheet } from "react-native";

const PasswordCreatePage = () => {
  const [password, setPassword] = useState("");
  const [checkResult, setCheckResult] = useState({
    valid: false,
    errors: []
  });

  const onInputChange = (inputVal) => {
    setPassword(inputVal);
    const result = validatePassword(inputVal);
    setCheckResult(result);
  };

  return (
    <View style={styles.page}>
      <TextInput
        style={styles.input}
        placeholder="设置密码"
        secureTextEntry
        value={password}
        onChangeText={onInputChange}
      />
      {/* 输出所有不符合的规则提示 */}
      {checkResult.errors.map((err, idx) => (
        <Text key={idx} style={styles.errTxt}>{err}</Text>
      ))}
      {checkResult.valid && (
        <Text style={styles.successTxt}>密码格式符合要求</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    paddingHorizontal: 20,
    paddingTop: 40
  },
  input: {
    borderWidth: 1,
    borderColor: "#e0e0e0",
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 12
  },
  errTxt: {
    color: "#f5222d",
    fontSize: 12,
    marginBottom: 4
  },
  successTxt: {
    color: "#52c41a",
    fontSize: 12
  }
});

export default PasswordCreatePage;

自定义调整说明 #

• 要新增规则（比如必须包含数字），只需要在校验函数里新增对应正则判断即可，比如加if (!/\d/.test(password)) errorList.push("需包含至少1个数字")
• 要调整特殊字符的支持范围，修改特殊字符校验正则中[]包裹的内容即可，注意正则保留字符要加转义符\
• 可根据业务需求修改密码长度要求、错误提示文案等内容

内容的提问来源于stack exchange，提问作者FaysalB