如何在反应js中验证具有api值的文本字段？

Question

Iam trying to add a verification in my website i want to verify my phone number digits according to the phone number digit object coming from the api I hace tried multiple things but it didn't work i would be great if any one can help.

<div className="col-8 ml-0 pl-0">
                <TextInputComponent
                  label={
                    <IntlMessages id="profile.emailbox.field.mobilenumber" />
                  }
                  type="text"
                  placeholder="Mobilnummer"
                  value={this.state.number}
                  onChange={(e) => {
                    if (e.target.value != this.props.user.data.user.phone_number_digits ) {
                      <small className="text-danger my-0 py-0">{this.state.errorNumber}</small>
                    }else {
                      this.handleChange(e, "number");
                    }
                  }}
                />
              </div>

Answer 1

What I can see is that you are checking the input value on change and not checking the size/length of the input value and checking it with the api results.
Which will surely not give desired results. So try checking the length of the input.

You can also use some good libraries like - https://catamphetamine.gitlab.io/react-phone-number-input/ ?

Answer 2

Keep in mind that it's near impossible to expect the end-user to enter the correct phone number format (in contrast to your server or api). So I would suggest that you remove all special characters to make the formatting uniform. You can always do your own formatting with REGEX later if needed.

Also, a comparison operator in javascript uses three equal signs. Not equals is.== so this could also be contributing to your issue.

onChange={(e) => {
  let mobileNumber = ("" + e.target.value).replace(/\D/g, "");
  let mobileDigits = ("" + this.props.user.data.user.phone_number_digits).replace(/\D/g, "");
      if (mobileNumber  !== mobileDigits  ) {
        <small className="text-danger my-0 py-0">{this.state.errorNumber}</small>
      }else {
        this.handleChange(e, "number");
      }

Update Upon looking at your code once more, it appears that you're setting the value of the input field as empty.

value={this.state.number}

Meaning that you're assigning the state value for "number" to the input field, but never updating it with onChange. Inside of your !== condition you should update state with

this.setState(prevState =>{
   return{
        ...prevState,
        number: mobileNumber
   }
})