Question

是否可以使用Switch case在React Native中进行验证？请给我正确的方法。下面是我的代码

 handleSubmit=()=>{
  this.setState({ isLoading : true});

  emailValid = /^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i;
  mobileValid = /^[0]?[789]\d{9}$/;

  if(this.state.first_name == ''){
    this.setState({ isLoading : false});
    Toast.show('Please enter first name',Toast.SHORT);
  }
  else if(this.state.mobile_no.length < 10){
    this.setState({ isLoading : false});
    Toast.show('Please enter at least 10 digits',Toast.SHORT);
  }
  else if(this.state.password == ''){
    this.setState({ isLoading : false});
    Toast.show('Please enter password',Toast.SHORT);
  }
  else if(this.state.password.length < 8){
    this.setState({ isLoading : false});
    Toast.show('Please enter strong password',Toast.SHORT);
  } 
  else{
   }
}

Answer 1

如果要使用开关盒，则可以这样做。请参见下面的代码

  handleSubmit = () => {
      this.setState({ isLoading: true });

      emailValid = /^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i;
      mobileValid = /^[0]?[789]\d{9}$/;

      switch (true) {
        case this.state.first_name === '': 
          this.handleError('Please enter first name''); //call method to display toast
          break;
        case this.state.mobile_no.length < 10:
          this.handleError('Please enter at least 10 digits');
          break;
        case this.state.password === '':
          this.handleError('Please enter password');
          break;
        case this.state.password.length < 8:
          this.handleError('Please enter strong password');
          break;
        default:
          //otherwise perform your logic
          break;
      }
    }

handleError=(message)=>{
       this.setState({ isLoading: false });
          Toast.show(message, Toast.SHORT);
}

Answer 2

对于更少的代码，我要做的是：

let message=''
this.state.first_name==='' ? message='Please enter  name': null;
this.state.mobile_no.length < 10?message='Please enter at least 10 digits':null;
this.state.password === ''?message='Please enter password':null;
this.state.password.length < 8?message='Please enter strong password':null;
if(message){
    this.setState({ isLoading : false});
    Toast.show(message,Toast.SHORT);
}else{
   //every validation is fine do whatever
}

Answer 3

对于更少的代码和多种形式，您可以使用validate.js。您可以在此处npm安装：http://validatejs.org/ 并使用以下博客以供使用：https://medium.com/@pavsidhu/validating-forms-in-react-native-7adc625c49cf

我如何使用Switch大小写或其他方式进行验证以在React Native中减少代码数量？

3 个答案: