React Native用户名密码验证：如何在输入框下方显示错误提示

Got it, let's get those error messages showing right under your inputs instead of popping up alerts—way better for user experience! Here's how to refactor your code step by step:

1. Add State for Error Messages #

First, you'll need to track error states for both username and password using React's useState. This lets you conditionally render the error text below each input:

import { useState } from 'react';
import { View, TextInput, Text, Button } from 'react-native';

export default function LoginScreen() {
  const [uname, setUname] = useState('');
  const [pwd, setPwd] = useState('');
  // New state variables for errors
  const [usernameError, setUsernameError] = useState('');
  const [passwordError, setPasswordError] = useState('');

  // ... rest of your code will go here
}

2. Refactor Your Validation Logic #

Replace those alerts with setting the error state values. I'll clean up your original logic to be more readable too:

const handleSubmit = () => {
  // Reset errors first so old messages don't stick around
  setUsernameError('');
  setPasswordError('');

  let isFormValid = true;

  // Check username requirements
  if (!uname.trim()) {
    setUsernameError('Username is required');
    isFormValid = false;
  } else if (uname === "true") { // Keeping your existing check for "true" username
    setUsernameError('Invalid username');
    isFormValid = false;
  }

  // Check password requirements
  if (!pwd.trim()) {
    setPasswordError('Password is required');
    isFormValid = false;
  }

  // If form is valid, proceed with auth (replace this with your actual logic)
  if (isFormValid) {
    // Example: If your auth check fails later, you can set a general error
    // setUsernameError('Invalid username/password');
    // setPasswordError('Invalid username/password');
    alert('Valid credentials!'); // Replace with your success flow
  }
};

3. Render Errors Below Inputs #

Update your JSX to display the error text right under each input. You can even style the input border red when there's an error for extra clarity:

return (
  <View style={{ padding: 20, gap: 15, marginTop: 50 }}>
    {/* Username Input + Error */}
    <View>
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: usernameError ? 'red' : '#ccc',
          padding: 12,
          borderRadius: 6,
        }}
        placeholder="Enter username"
        value={uname}
        onChangeText={(text) => {
          setUname(text);
          // Clear error as user types
          if (usernameError) setUsernameError('');
        }}
      />
      {usernameError && (
        <Text style={{ color: 'red', fontSize: 12, marginTop: 6 }}>
          {usernameError}
        </Text>
      )}
    </View>

    {/* Password Input + Error */}
    <View>
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: passwordError ? 'red' : '#ccc',
          padding: 12,
          borderRadius: 6,
        }}
        placeholder="Enter password"
        secureTextEntry
        value={pwd}
        onChangeText={(text) => {
          setPwd(text);
          // Clear error as user types
          if (passwordError) setPasswordError('');
        }}
      />
      {passwordError && (
        <Text style={{ color: 'red', fontSize: 12, marginTop: 6 }}>
          {passwordError}
        </Text>
      )}
    </View>

    <Button title="Login" onPress={handleSubmit} />
  </View>
);

Bonus: Real-Time Error Clearing #

Notice the onChangeText handlers now clear the error when the user starts typing—this makes the form feel more responsive, as users don't have to see the error message once they're fixing it.

That's it! Now your errors will show up directly under the input that has the issue, instead of interrupting the user with alerts.

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