【发布时间】：2020-12-07 01:50:59
【问题描述】：
我正在建立一个注册表单，但遇到了问题。用户完成字段后，我使用正则表达式进行验证检查。每个验证函数都会设置一条错误消息。即使我故意触发所有这些错误，但如果我提交表单，只会出现一个。这是我的代码：
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}\.[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,0)"
errorStyle={{ color: 'red' }}
onChangeText={text => setFirstName(text)}/>
<Input
containerStyle={styles.inputView}
placeholder="Last Name..."
placeholderTextColor="rgb(0,0,0)"
errorStyle={{ color: 'red' }}
onChangeText={text => setLastName(text)}/>
<Input
onFocus={()=>{setPassError(null)}}
secureTextEntry
containerStyle={styles.inputView}
placeholder="Password..."
placeholderTextColor="rgb(0,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,0)"
errorStyle={{ color: 'red' }}
errorMessage={confPassError}
onChangeText={text =>setConfirmPassword(text)}/>
<Input
containerStyle={styles.inputView}
onFocus={()=>{setEmailError(null)}}
placeholder="Email..."
placeholderTextColor="rgb(0,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"
}
【问题讨论】：
-
您是否考虑过状态更新的异步性质？这可能只是一个竞争条件。
-
看起来只要验证函数返回 false，其余部分就不会执行，因为这样做没有意义.. 总体结果将是 false，因为我使用的是 AND 运算符。这是打字稿/javascript中的东西吗？
-
是的，JS会短路。
-
这是一个javascript的东西Short-circuit evaluation
标签： reactjs typescript jsx native