在反应功能组件中反应本机表单电子邮件和密码验证

Question

我创建了一个简单的表单。我需要知道如何验证至少 8 个字符的电子邮件和密码。许多教程都是为类组件设计的。但我无法用功能组件处理它们。请帮帮我

const SigninPage = ({navigation}) => {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const {colors} = useTheme();
    

return(
 <View style={styles.inputView}>
          <TextInput
            style={styles.TextInput}
            placeholder="E-mail"
            placeholderTextColor="white"
            onChangeText={(email) => setEmail(email)}
          />
        </View>

        <View style={styles.inputView}>
          <TextInput
            style={styles.TextInput}
            placeholder="Password"
            placeholderTextColor="white"
            secureTextEntry={true}
            onChangeText={(password) => setPassword(password)}
          />
        </View>

        <TouchableOpacity
          onPress={() => signIn() }>
          <LinearGradient colors={['#730018', '#00085b']} style={styles.signIn}>
            <Text style={styles.textSign}>SIGN IN</Text>
          </LinearGradient>
        </TouchableOpacity>
        <Text>Fogot Your Password?</Text>
      </Animatable.View>
    </View>
)

}

Answer 1

亲爱的，你快完成了！

看，我稍微修改了你的代码。

const SigninPage = ({ navigation }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { colors } = useTheme();

const signIn = () => {                          // <= Added this function
    const strongRegex = new RegExp("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$");

    if (!strongRegex.test(email)) {
        showMessage(MESSAGE.email)
        return false;
    } else if (password.length < 8) {
        showMessage(MESSAGE.password);
        return false;
    }
}

return (
    <View>                                      
        <Animatable.View >
            <View style={styles.inputView}>
                <TextInput
                    style={styles.TextInput}
                    placeholder="E-mail"
                    placeholderTextColor="white"
                    onChangeText={(email) => setEmail(email)}
                />
            </View>
            <View style={styles.inputView}>
                <TextInput
                    style={styles.TextInput}
                    placeholder="Password"
                    placeholderTextColor="white"
                    secureTextEntry={true}
                    onChangeText={(password) => setPassword(password)}
                />
            </View>

            <TouchableOpacity
                onPress={() => signIn()}>
                <LinearGradient colors={['#730018', '#00085b']} style={styles.signIn}>
                    <Text style={styles.textSign}>SIGN IN</Text>
                </LinearGradient>
            </TouchableOpacity>
            <Text>Fogot Your Password?</Text>
        </Animatable.View >
    </View>
)

}

我希望你也需要同样的东西。