在 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

trim 输入：string.trim()

In JavaScript, trim() is a string method that is used to remove whitespace characters from the start and end of a string. Whitespace characters include spaces, tabs, etc. Because the trim() method is a method of the String object, it must be invoked through a particular instance of the String class

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

Answer 2

有条件地呈现如下错误

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

只有当 emailError 有值时才会显示

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

adding form validation in react-native, removing extra spaces

reactjs

react-native

react-native-stylesheet