react-native - 在反应功能组件中反应本机表单电子邮件和密码验证
问题描述
我创建了一个简单的表格。我需要知道如何验证至少 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>
)
}
解决方案
你快完成了亲爱的!
看,我稍微修改了你的代码。
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>
)
}
我希望你也需要同样的东西。
推荐阅读
- nginx - Nomad : raw_exec 安装 nginx
- javascript - 在什么情况下它会在使用 react 自定义钩子时重新渲染
- c++ - (C++) 如何判断字符串中第一个值之后的每个值是大写还是小写
- javascript - Rappid/Joint 中的 Html 元素定位
- node.js - Twilio 发送所有呼叫的呼叫完成状态
- android - 加密密钥不可用 - ExoPlayer
- javascript - “通用”组合的英尺英寸正则表达式
- html - 错位用于 UTF-8 日文字符
- python - 有没有办法通过在 Pandas DataFrame 中指定行来导出到 CSV 文件?
- php - file_exists():open_basedir 限制生效。文件 (/tmp) 不在允许的路径内: