Determining special characters within a string using VueJS

As a newcomer to VueJS, I am currently developing an application that requires a signup and login system. My goal is to inform the user if they have entered a special character such as /[&^$*_+~.()\'\"!\-:@]/. In order to achieve this, I have implemented the use of the includes method in my signup.vue file. While includes works well with individual characters, it does not seem to function correctly with a string of characters. How can I address this issue?

var character = /[&^$*_+~.()\'\"!\-:@]/

if (this.name.includes(character) || this.lastname.includes(character)) {
   this.feedback = 'Special character present, please correct'
}

javascriptvue.jsvuejs2

Answer №1

This approach is effective

var specialChar = /[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/

if (specialChar.test(this.name) || specialChar.test(this.lastname)) {
   this.message = 'There are special characters present, please revise'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify HTML text using conditional CSS without JavaScript

Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail. Here's my query: I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific B ...

javascriptcssreplaceonclick

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Can someone please explain why ng-repeat-start is not functioning properly despite using the most up-to-date AngularJS version? I have included it from the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr ...

javascriptjqueryhtmlangularjs

jQuery selector unable to locate the specified class in the table row

After receiving an array of strings as a response from an SQL query, I am using JavaScript to dynamically add this data as rows to an HTML table: loadUsers: function() { . . . function displayUsersOnTable(response) { for(var i = ...

javascriptjqueryhtmlcss

Adding vibrant colors to the expansion panel within Material UI to enhance its visual appeal

How can I customize the color of the expansion panel in material ui when it is open? Is there a way to override this in material ui? Feel free to check out the code example at this link ...

javascriptreactjsmaterial-ui

How to Implement Jquery Confirm in Laravel Form Opening?

I've set up a Form using the Laravel Form package. {!! Form::open(['action' => ['Test\\BlogController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'Confirm() ...

javascriptphpjqueryformslaravel

Re-enable the jQuery-ui sortable feature after it has been turned off

Here is a snippet of my jQuery code: var status = true; $('#edit').click(function () { if (status) { $('table tbody').sortable({ axis: 'y', update: function (event, ui) { va ...

javascriptjqueryjquery-uijquery-ui-sortablesortables

When a previous form field is filled, validate the next 3 form fields on keyup using jQuery

Upon form submission, if the formfield propBacklink has a value, the validation of fields X, Y, and Z must occur. These fields are always validated, regardless of their values, as they are readonly. An Ajax call will determine whether the validation is tru ...

javascriptjqueryajaxjquery-validate

Guide to extracting a specific segment from req.body in Node.js

I've been attempting to access a specific nested property of req.body, but the output always turns out to be undefined. Here is the code snippet: let dataReceived = JSON.stringify(req.body); console.log(dataReceived); let refCode = ...

javascriptnode.jsexpress

Error: Import statement is not allowed outside of module scope

I've been through multiple documentations and sources, but I'm still struggling to fix this error. I recently started learning JavaScript and decided to experiment with fetch() commands, however, I keep encountering an issue (the title). Below i ...

javascriptnpmfetch-api

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js

Can you explain the meaning of the code `@input="$emit('input', $event)" used in a Vue component?

I have come across some code that I am looking to revise: <b-input :value="value" @input="$emit('input', $event)" ref="input" :maxlength="maxlength"/> Can someone explain what @input="$emit('input', $event)" means? Where should ...

vue.jsvue-events

Using data outside of Vue and passing it into a Vue component

I have a function that is executed independently from a Vue component. I am aiming to pass the data it generates to the data property within the Vue component. <script> function example(){ var item = 'item'; }; ...

vue.jsvuejs2vue-component

Merge two JSON objects together by matching their keys and maintaining the original values

After having two separate JSON objects representing data, I found myself in the position of needing to merge them into one combined result. The initial objects were as follows: passObject = { 'Topic One' : 4, 'Topic Two' : 10, &apos ...

javascriptnpmlodash

Executing a function in AngularJS using PHP

My current project involves an Angular application that needs to load a PHP page within the view. The setup is functioning properly, but I now require an Angular function to run after the PHP code has loaded. I am wondering about the process of calling an ...

javascriptphpangularjs

Order of execution behavior

I am currently working on a function that, when triggered, will populate the webpage with dynamic tiles. These tiles retrieve data from a remote database through an AJAX request and utilize jQuery 3.0 in the implementation. Function Implementation: funct ...

javascriptjqueryajax

"Optimizing navigation with dynamic link routing in AngularJS

I am working on a list of apartments displayed using ng-repeat. I need each apartment to be a clickable link that directs the user to view more details about that specific apartment. However, I am facing an issue where the links are not being repeated dyna ...

javascriptangularjsangular-ui-router

How can we best organize a VueJS application to accommodate this specific logic?

I am currently working on an app that needs to display data fetched from multiple sources based on a condition. The issue I am facing is that the process of fetching, organizing, and returning the data varies depending on the source, sometimes even requiri ...

javascriptvue.jsvue-component

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Using peer.js to stream video on a React app addVideoStream(videoElement: HTMLVideoElement, stream: MediaStream) { videoElement.srcObject = stream videoElement?.addEventListener('loadedmetadata', () => { videoElement.play() ...

javascripthtmlreactjsstreamwebrtc

Why won't NextJS Image elements render on iOS 16 when they are not in the viewport initially?

I opted to implement NextJS for enhanced routing capabilities and image optimization. However, I encountered an issue with certain images failing to load properly on iOS devices. The problem arises within a scrollable horizontal container featuring Product ...

javascriptimagenext.jssafarilazy-loading

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom