Please provide pattern block links and any special characters as input

Question

Please provide pattern block links and any special characters as input

I have a promotion box where users can input text to send to administrators.

Objectives

I need to prevent users from inputting links and special characters.
Users should only be able to input letters a-z (case insensitive) and numbers 0-9.
Input is optional.

Sample Code

Documentation

this.$prompt('Enter your message here.', 'Note', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'Thank You!',
    inputPattern: /[A-Za-z0-9]+/,
    inputErrorMessage: 'Invalid Message'
}).then(({ value }) => {
    // do something...
}).catch(() => {
    // do something...
});

Query

What should be the correct value for inputPattern for the desired functionality mentioned above?

javascript typescript vue.js

Answer 1

Answer №1

It appears that you have overlooked the two rules requiring your test to match the entire string:

/^ .... $/

Additionally, to make the input optional, you should replace the + symbol (meaning 1 or more) with * (indicating 0 or more).

For instance:

var testcaseInputs = [
  "niceone", // yes
  "niceone1", // yes
  "NiceOne1", //yes 
  "nice-one-1", // no
  "", // yes
  " ", // no
];
var inputPattern = /^[A-Za-z0-9]*$/;

testcaseInputs.forEach(testcase => {
  console.log(testcase, new RegExp(inputPattern).test(testcase));
});

If you wish to allow strings with spaces, you can use this alternative regex 🙂 /^[A-Za-z0-9\s]*$/ (includes \s to accept whitespace characters)

Answer 2

It appears that you have overlooked the two rules requiring your test to match the entire string:

/^ .... $/

Additionally, to make the input optional, you should replace the + symbol (meaning 1 or more) with * (indicating 0 or more).

For instance:

var testcaseInputs = [
  "niceone", // yes
  "niceone1", // yes
  "NiceOne1", //yes 
  "nice-one-1", // no
  "", // yes
  " ", // no
];
var inputPattern = /^[A-Za-z0-9]*$/;

testcaseInputs.forEach(testcase => {
  console.log(testcase, new RegExp(inputPattern).test(testcase));
});

If you wish to allow strings with spaces, you can use this alternative regex 🙂 /^[A-Za-z0-9\s]*$/ (includes \s to accept whitespace characters)

Please provide pattern block links and any special characters as input

Objectives

Sample Code

Query

Answer №1

Similar questions

Refresh the DIV element that houses dynamically generated <ul> HTML content after submitting new inputs

What varieties of ajax styles are there?

The local server for handling HTTP requests has ceased to operate

Why am I unable to use a string as the src in next/image component?

Providing parameters to a function. What could be the issue?

submitting URL from dropdown menu without using the 'submit' button

Having trouble sending values via POST request in Node.js using Express

Troubleshooting: Issues with Mixins in Vue Test Utils and Jest

Tips for ensuring that your modal functions properly with an image tag within a figure tag

Activate Pop-up for a single instance on BigCommerce

Ways to retain the page state even after refreshing or quitting the browser?

Exploring Clara.io's json data for 3D geometry within the Three.js

What is the best way to import API Endpoints from various directories in an Express Server?

Unable to import JSX/TSX component from a separate React application into my primary React application

Struggling to implement a vertical scroll bar in HTML code?

Could there be an issue with the way I've implemented my setInterval function?

Error: Issue with hook function call detected. Struggling to locate exact source in React JS

How can I combine these scripts that are not working simultaneously?

Using both Promise based architecture and events in Node.js can lead to unexpected behavior and should be avoided

Tips for implementing personalized/modified CSS on Vuetify components?