best way to handle regex phone number in onChangeText react native [duplicate]

Question

I want to handle phone number field in onChangeText TextInput React native,

from this answer i can use ^08[0-9]{9,}$ pattern, but the problem is on first number, regex wont allow 0 because of 08 on regex pattern, and if i add 0|08..., regex allow 0 but it's allow any number on 2nd number instead of 08.

My Question : what is the best way to force regex handle first number is 0 and second number is 8? so i get 08xxxxxxxxxx (when x is another number 0-9)

and here is an example of my current code in reactJS, you can feel i can type any number after i'm typing 0, and for new suggested regex (^0|08[0-9]{9,}$) i can't type any number anymore after 0,

Notes: i don't know why my question marked as duplicate since the duplicated not help me to fix my issue

class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { let reg = /^0|08[0-9]{9,}$/ if(reg.test(event.target.value)){ this.setState({value: event.target.value}); } } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Phone: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } } ReactDOM.render( <NameForm />, document.getElementById('root') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

It's not clear exactly what you want to match and not match, can you give a few examples of both matches and non-matches required. — iakobski
– iakobski, Commented Oct 28, 2019 at 7:50
@iakobski you can try my snippet above to fell what i really want, all i want is just lock first seconds number to 08, but if i do 08[0-9]{9,} regex, user can't type 0 at textbox — flix
– flix, Commented Oct 28, 2019 at 8:39

Vignesh V Pai · Accepted Answer · 2019-10-28 07:42:28Z

You'll have to use groups in regular expressions.

The solution to your problem: /^(0|08|08[0-9]{1,9})$/

Explanation: Capture if it's a 0 or 08 or 08x or 08xx or 08xxx or 08xxxx ... upto 08xxxxxxxxx ( i.e upto 9 x's, and x can be any single digit number ).

You can simplify the above mentioned regular expression and rewrite it as : /^(0|08[0-9]{0,9})$/

iakobski · Accepted Answer · 2019-10-28 07:45:59Z

You need to use parentheses to show where your alternatives start and end. If you don't it will extend to the whole regex, including the start/end assertions. So in your regex ^0|08[0-9]{9,}$ the first alternative is zero at the start of the string, ignoring anything that follows, the second alternative is your 08xxxxxxxx at the end of the string, ignoring anything before that. Try ^(0|08[0-9]{9,})$ if you want to match just 0 on its own as well as 08xxxxxxxxx

^(0|08[0-9]{9,})$ not help on 2nd number, i can't even type 8
It's not clear what you want, this is from your original question. See my comment to your post and provide examples.

Collectives™ on Stack Overflow

best way to handle regex phone number in onChangeText react native [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related