Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

Question

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

I need to create a RegEx for a text field in Angular / TypeScript that limits the user to inputting only a 1-3 digit number that does not start with 0. While it's straightforward to restrict input to just digits, I'm struggling to prevent an input that starts with 0 without breaking the RegEx validation.

<input matInput

  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="onIntervalLengthChange($event)"
  maxLength="3"
  onkeypress="return String.fromCharCode(event.charCode).match(/[^0-9]/g) === null"
  
>

javascript regex typescript

Answer 1

Answer №1

I am not very familiar with Angular, but I can offer a JavaScript solution for your question. Since you did not specify Angular in your question, I will provide code that can easily be translated into Angular if needed.

const userInput = document.getElementById("userInput");

userInput.addEventListener("input", event => {
  const { value } = event.currentTarget;
  
  if (!/^[1-9]\d{0,2}$/.test(value)) {
    event.currentTarget.value = value.slice(0, -1);
  }
});

<input id="userInput" type="number" />

Answer 2

I am not very familiar with Angular, but I can offer a JavaScript solution for your question. Since you did not specify Angular in your question, I will provide code that can easily be translated into Angular if needed.

const userInput = document.getElementById("userInput");

userInput.addEventListener("input", event => {
  const { value } = event.currentTarget;
  
  if (!/^[1-9]\d{0,2}$/.test(value)) {
    event.currentTarget.value = value.slice(0, -1);
  }
});

<input id="userInput" type="number" />

Answer 3

Answer №2

It turns out the solution was simpler than I thought. All it took was a little change in perspective :)

<input matInput

  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="onIntervalLengthChange($event)"
  maxLength="3"
  onkeypress="return String.fromCharCode(event.charCode).match(/[^1-9]?[^0-9]?[^0-9]/g) === null"
  
>

Answer 4

It turns out the solution was simpler than I thought. All it took was a little change in perspective :)

<input matInput

  [(ngModel)]="backupIntervalLength"
  (ngModelChange)="onIntervalLengthChange($event)"
  maxLength="3"
  onkeypress="return String.fromCharCode(event.charCode).match(/[^1-9]?[^0-9]?[^0-9]/g) === null"
  
>

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

Answer №1

Answer №2

Similar questions

What is the best way to remove <a> tags from an XML document?

Tips for executing a function in jQuery when a Pop up appears

Receiving an error message and identifying the specific line number within the catch

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript

The SDK generated by AWS API Gateway does not include the JavaScript client file

Even though I am aware that the variable AJAX is attempting to return is not empty, it is still returning 'undefined'

The GM_xmlHttpRequest POST method is not functioning properly when called within an event listener

Is it possible to input rendered HTML into a vue property?

Utilizing Redux with React class components: A comprehensive guide

Utilizing next-redux-wrapper within the getServerSideProps function in Next.js allows for seamless

Developing an npm package for storing a communal instance

Creating an object with an array of objects as a field in MongoDB: A step-by-step guide

Successfully resolved: Inability to dynamically adjust button color according to its state

Using Typescript with d3 Library in Power BI

What is the method to extract mimeType from an HTMLImageElement?

Leveraging JavaScript code repeatedly

Encountering an ETIMEDOUT error while sending out large (10k) post requests with axios.all in a Node

What is the best way to display the outcome in a popup window?

The sort function in Reactjs does not trigger a re-render of the cards

What causes the app to crash in release mode when importing a TypeScript component, while no issues arise in debugging?