问题描述
我正在建立注册表，但遇到了问题。用户填写完字段后，我用正则表达式进行验证检查。每个验证功能都会设置一条错误消息。即使我故意触发了所有这些错误，但如果我提交表单，则只会出现一个错误。这是我的代码：
function RegisterScreen(): JSX.Element{
const pwInput = React.createRef();
const [firstName,setFirstName] = useState('');
const [lastName,setLastName] = useState('');
const [email,setEmail] = useState('');
const [password,setPassword] = useState('');
const [confirmPassword,setConfirmPassword] = useState('');
const [birthday,setBirthday] = useState<Date | null>(null);
const [isSelected,setSelection] = useState(false);
const [openTerms,setOpenTerms] = useState(false);
const [emailError,setEmailError] = useState<string | null>(null);
const [passError,setPassError] = useState<string | null>(null);
const [confPassError,setConfPassError] = useState<string | null>(null);
const [isTermsChecked,setIsTermsChecked] = useState<string | null>(null);
function _validateEmail(): boolean{
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email))
return true;
else{
setEmailError(RegisterErrors.emailError);
return false;
}
}
function _validatePw(): boolean{
const re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/
if(re.test(password)) return true;
else{
setPassError(RegisterErrors.pwWeak);
return false
}
}
function _pwMatch(): boolean{
if(password == confirmPassword){
return true;
}else{
setConfPassError(RegisterErrors.pwConfirmMatchError);
return false;
}
}
function _validateAge(): boolean{
return true;
}
function _validateTermsAndCond(): boolean{
return true;
}
function validateFieldsAndRegister(){
console.log(email);
console.log(password);
console.log(confirmPassword);
if( _validateEmail() && _validatePw() && _validateAge() && _validateTermsAndCond() && _pwMatch()){
//trimite la firebase
console.log("okay")
}else{
console.log('wrong fields')
}
}
return(
<SafeAreaView style={{flex:1}}>
<ScrollView>
<View style = {{flex:1,alignItems: "center",justifyContent:"center",backgroundColor:"white"}}>
<TermsAndConditions open = {openTerms} close = { ()=>setOpenTerms(false) }/>
<Image source={require("../../images/logoR.png")} style={styles.logoImg}/>
<Text style={styles.mainText}>Register</Text>
<Input
containerStyle={styles.inputView}
inputContainerStyle={{backgroundColor:"white"}}
placeholder="First Name..."
placeholderTextColor="rgb(0,0)"
errorStyle={{ color: 'red' }}
onChangeText={text => setFirstName(text)}/>
<Input
containerStyle={styles.inputView}
placeholder="Last Name..."
placeholderTextColor="rgb(0,0)"
errorStyle={{ color: 'red' }}
onChangeText={text => setLastName(text)}/>
<Input
onFocus={()=>{setPassError(null)}}
secureTextEntry
containerStyle={styles.inputView}
placeholder="Password..."
placeholderTextColor="rgb(0,0)"
errorStyle={{ color: 'red' }}
errorMessage={passError}
onChangeText={text =>setPassword(text)}/>
<Input
secureTextEntry
onFocus = {()=>{setConfPassError(null)}}
containerStyle={styles.inputView}
placeholder="Confirm Password..."
placeholderTextColor="rgb(0,0)"
errorStyle={{ color: 'red' }}
errorMessage={confPassError}
onChangeText={text =>setConfirmPassword(text)}/>
<Input
containerStyle={styles.inputView}
onFocus={()=>{setEmailError(null)}}
placeholder="Email..."
placeholderTextColor="rgb(0,0)"
errorStyle={{ color: 'red' }}
errorMessage={emailError}
onChangeText={text => setEmail(text)}/>
<View style={styles.checkboxContainer}>
<CheckBox
value={isSelected}
onValueChange={()=>{setSelection(!isSelected)}}
style={styles.checkbox}
/>
<TouchableOpacity onPress = {()=> {setOpenTerms(true);}}>
<Text style={styles.label}>Terms and Conditions</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={{...styles.inputView,...styles.regBtnContainer}} onPress = {()=>{validateFieldsAndRegister()}}>
<Text style = {styles.txtRegBtn}>Register</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
)
}
如果我在validateFieldsAndRegister的if语句之前调用验证功能，它将起作用。错误将显示在3个字段中。
这是我显示的错误
export const RegisterErrors = {
emailError: "You must enter a valid email",pwConfirmMatchError:"The passwords you entered are not the same",termsAndCondError:"You must read and agree with the Terms and Conditions",birthdayError:"You must be 21 or older",pwWeak:"Your password must contain: a lowercase letter,a acapital letter,a number and minimum 8 characters"
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）