How to Validate Image Names Using Regex in JavaScript?

Estimated read time 2 min read

To validate image names using regex in JavaScript, you can use a regular expression pattern to match the allowed image name format. Here’s an example code snippet that demonstrates how to do this:

function validateImageName(imageName) {
  var regex = /^[a-zA-Z0-9-_]+\.(jpg|jpeg|png|gif)$/; // Regular expression to match allowed image name format
  if (regex.test(imageName)) {
    return true; // Image name is valid and matches allowed format
  } else {
    return false; // Image name is not valid and does not match allowed format

In this code snippet, the validateImageName() function takes an image name parameter and uses a regular expression to match the allowed image name format. The regular expression ^[a-zA-Z0-9-_]+\.(jpg|jpeg|png|gif)$ matches any string that starts with one or more alphanumeric characters (upper or lower case), hyphens, or underscores, followed by a dot (.), and ends with the file extension (.jpg, .jpeg, .png, or .gif).

You can use this function to validate image names by calling it whenever the user submits a form or enters an image name into a text field. For example:

<input type="text" onblur="if(!validateImageName(this.value)) {alert('Please enter a valid image name.'); this.value='';}">

In this example, the onblur attribute of the input field calls the validateImageName() function when the user moves focus away from the field. If the image name is not valid, an alert message is displayed and the input field is cleared.

Note that this is just one way to validate image names using regex in JavaScript. There are many other methods and techniques that you can use depending on your specific requirements and use case.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply