JSFiddle - React, Tailwind, and code Playground

JavaScript

var fail1 = 'aaaaaaa'            // length not met
var fail2 = 'aaaaaaaaaaaaaaa';   // no special, upper, numeric
var fail3 = 'aAaaaaaaaaaa';      // no special, number
var fail4 = 'aAaaaaa1aaaaa';     // no special
var fail5 = 'aA3@';              // all characters specified - length not met
var fail6 = 'aAaaa1a aa';        // ignore whitespace
var pass = 'aAaaa1a[aa';

var regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,}$/

console.log('fail: ' + regex.test(fail1))
console.log('fail: ' + regex.test(fail2))
console.log('fail: ' + regex.test(fail3))
console.log('fail: ' + regex.test(fail4))
console.log('fail: ' + regex.test(fail5))
console.log('fail: ' + regex.test(fail6))
console.log('pass: ' + regex.test(pass))