Question

这是一个简单的注册页面，其中包含用户名，电子邮件，电话号码，密码和重复密码。问题出在重复输入密码。该输入应该在文本更改时触发verifyRePassword（就像其他所有输入及其各自的功能一样）。尽管其他输入触发它们的功能没有问题，但是重复密码似乎不会在文本更改时触发其功能（verifyRePassword）。

我尝试用其他功能切换每个输入，而其他输入似乎可以触发功能verifyRePassword。

//FUNCTIONS

  verifyPassword = (text) => {
    this.setState({password:text})
    console.log("verifyPassword Called");
    let reg = /\w{6,}/ ;
    if(reg.test(text) === false)
    {
      this.setState({errMsgPassword: "Password must be longer than 6 characters"})
      this.setState({password:text})
      }
    else {
      this.setState({errMsgPassword: ""})
      this.setState({password:text})
    }
  }

  verifyRePassword = (text) => {
    this.setState({repassword: text})
    console.log("verifyRePassword Called !!!");
    const passStr = toString(this.state.password)
    const repassStr = toString(this.state.repassword)
    if (passStr === repassStr) {
      this.setState({
        errMsgRePassword: ""
      })
    }
    else{
      this.setState({
        errMsgRePassword: "Password must match."
      })
    }
  }



//INPUT

            <Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>

            <Text style={stsh.text1}>Password</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyPassword}
              secureTextEntry={true}
            />
            <Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>

            <Text style={stsh.text1}>Repeat Password</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyRePassword.bind(this)}
              secureTextEntry={true}
            />
            <Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>

由于两者的结构相似，因此两者都可以正常工作。密码有效，但不能重复密码。

* edit：代码中还有一些内容

//CONSTRUCTOR
  constructor(){
    super()
    this.state = { 
      username: "",
      emailadd: "",
      phonenum: "",
      password: "",
      repassword: ""
    }
    this.verifyUsername = this.verifyUsername.bind(this)
    this.verifyEmailadd = this.verifyEmailadd.bind(this)
    this.verifyPhonenum = this.verifyPhonenum.bind(this)
    this.verifyPassword = this.verifyPassword.bind(this)
  }



//COMPLETE FUNCTIONS

  verifyUsername = (text) => {
    this.setState({username:text})
    console.log(text);
    let reg = /\w{5,30}/ ;
    if(reg.test(text) === false)
    {
      this.setState({errMsgUsername: "Username must contain 5 to 30 characters"})
      this.setState({username:text})
    return false;
      }
    else {
      this.setState({errMsgUsername: ""})
      this.setState({username:text})
    }
  }

  verifyEmailadd = (text) => {
    this.setState({emailadd:text})
    console.log(text);
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
    if(reg.test(text) === false)
    {
      this.setState({errMsgEmailadd: "Enter a valid email address"})
      this.setState({emailadd:text})
    return false;
      }
    else {
      this.setState({emailadd:text})
      this.setState({errMsgEmailadd: ""})
    }
  }

  verifyPhonenum = (text) => {
    this.setState({phonenum:text})
    console.log(text);
    let reg = /\d{10,11}/ ;
    if(reg.test(text) === false)
    {
      this.setState({errMsgPhonenum: "Phone number must be 10 to 11 characters long consisting only of digits"})
      this.setState({phonenum:text})
    return false;
      }
    else {
      this.setState({errMsgPhonenum: ""})
      this.setState({phonenum:text})
    }
  }

  verifyPassword = (text) => {
    this.setState({password:text})
    console.log("verifyPassword Called");
    let reg = /\w{6,}/ ;
    if(reg.test(text) === false)
    {
      this.setState({errMsgPassword: "Password must be longer than 6 characters"})
      this.setState({password:text})
      }
    else {
      this.setState({errMsgPassword: ""})
      this.setState({password:text})
    }
  }

  verifyRePassword = (text) => {
    this.setState({repassword: text})
    console.log("verifyRePassword Called !!!");
    const passStr = toString(this.state.password)
    const repassStr = toString(this.state.repassword)
    if (passStr === repassStr) {
      this.setState({
        errMsgRePassword: ""
      })
    }
    else{
      this.setState({
        errMsgRePassword: "Password must match."
      })
    }
  }



//COMPLETE RENDER

  render() {
    return (
      <View style={{flex: 1}}>
        <SafeAreaView>
          <ScrollView style={stsh.container}>

            <Text style={{fontSize:40, fontWeight: "bold", borderBottomWidth: 2, color: "#515151", borderColor: "#515151"}}>Sign Up</Text>

            <Text style={{color: "#515151",fontSize: 20,fontWeight: "bold",paddingTop: 60}}>Username</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyUsername}
              maxLength={30}
              t
            />
            <Text style={stsh.textError}>{this.state.errMsgUsername}</Text>

            <Text style={stsh.text1}>Email</Text>
            <TextInput style={stsh.text2}
              value={this.state.email}
              onChangeText={this.verifyEmailadd.bind(this)}
            />
            <Text style={stsh.textError}>{this.state.errMsgEmailadd}</Text>

            <Text style={stsh.text1}>Phone number</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyPhonenum}
              maxLength={11}
            />

            <Text style={stsh.textError}>{this.state.errMsgPhonenum}</Text>

            <Text style={stsh.text1}>Password</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyPassword}
              secureTextEntry={true}
            />
            <Text style={stsh.textError}>Error {this.state.errMsgPassword}</Text>

            <Text style={stsh.text1}>Repeat Password</Text>
            <TextInput style={stsh.text2}
              onChangeText={this.verifyRePassword}
              secureTextEntry={true}
            />
            <Text style={stsh.textError}>Error {this.state.errMsgRePassword}</Text>

            <Text style={{paddingBottom: 50}}></Text>
            <Button color='#515151'
              onPress={this.submitRegister}
              type="outline"
              title="Sign Up"
              titleStyle={{paddingVertical: 10, fontSize: 30, fontWeight: "bold", color: "#515151"}}
              buttonStyle={{borderColor:"#515151", borderWidth: 10, borderRadius: 20}}
              />
            <Text style={{paddingBottom: 100}}></Text>
          </ScrollView>
        </SafeAreaView>
      </View>
    );
  }
}

Answer 1

我已经重写了您的verifyRePassword函数（我删除了“ toString（）”，因为我看不到为什么需要它），请尝试以下代码：

  verifyRePassword = (text) => {
    console.log("verifyRePassword Called !!!", text);
    this.setState(()=>{
      return {repassword: text};
    }, ()=>{
      const {password, repassword} = this.state;
      this.setState({
        errMsgRePassword: password === repassword? "" : "Password must match.",
      });
    });
  }

比较值的问题在于：在setState更改重密码的值之前，实际上存在一个时间间隔。意思是;当行

const repassStr = toString(this.state.repassword)

运行，它实际上获得“ repassword”的先前值。因此，您应使用setState的回调，如上所示。

无法调用函数？

1 个答案: