reactjs - 在 react-native 中添加表单验证，删除多余的空格

Question

我有一个如下所示的登录表单 (1)：

当我添加表单验证时，它看起来像这样（2）：

textInputs 之间的 spcaes 是因为我有这样的东西：

    <View style={styles.SectionStyle}>
      <TextInput
        style={styles.inputStyle}
        .
        .
        .
        onBlur={() => checkEmailRGX()}
      />
    </View>
    <View style={styles.ErrorStyle}><Text style={{color: 'red', fontWeight: 'bold'}}>{emailError}</Text></View>

当输入不正确时（3）：

我想保持表单与（1）相同，当字段未正确填写时，它会转到（3），当任何字段填写正确时，错误文本应该消失，加上区域停留在，当您启动表单时，表单的元素之间存在间隙，看起来像（2），

这是我的错误文本字段：

  var emailErrorField = '';

这是验证：

const checkEmailRGX = () => {
    let rjx=/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    let isValid = rjx.test(email);
    if(email == ''){
      emailErrorField = t('eptyfield');
      setEmailErro(emailErrorField);
    }
    else if(!isValid){
      emailErrorField = t('emailfield');
      setEmailErro(emailErrorField);
    }
    else{
      emailErrorField = "";
      setEmailErro(emailErrorField);
    }
  }

如何删除空格但保留错误消息？

Answer 1

有条件地呈现如下错误

{
emailErrorField && <View style={styles.ErrorStyle}><Text style={{color: 'red', fontWeight: 'bold'}}>{emailError}</Text></View>
}

然后只有在 emailError 有值时才会显示

Answer 2

修剪输入： string.trim()

在 JavaScript 中，trim() 是一个字符串方法，用于从字符串的开头和结尾删除空格字符。空白字符包括空格、制表符等。因为 trim() 方法是 String 对象的方法，所以必须通过 String 类的特定实例来调用

然后检查字符串是否为空或“”