JSFiddle - React, Tailwind, and code Playground

JavaScript

var re = new RegExp(/(?=^.{8,32}$)(?=(?:.*?\d){1})(?=.*[a-z])(?=(?:.*?[!@#$%*()_+^&}{:;?.]){1})(?!.*\s)[0-9a-zA-Z!@#$%*()_+^&]*$/);
    var test1 = '1234567',      //  less than 8 characters
        test2 = 'aaaaaaaa',     //  no  number & no special character
        test3 = 'aaaaaaa1',     //  no special character
        test4 = 'aaaAaa#1',     //  satisfied
        test5 = 'abcdefghigklmnopqrstuvwxyz1234567890332123';  //  more than 32 characters

$('body').append('<p>1234567    <strong>' + re.test(test1).toString().toUpperCase()+'</strong></p>');
$('body').append('<p>aaaaaaaa    <strong>' + re.test(test2).toString().toUpperCase()+'</strong></p>');
$('body').append('<p>aaaaaaa1    <strong>' + re.test(test3).toString().toUpperCase()+'</strong></p>');
$('body').append('<p>abcdefghigklmnopqrstuvwxyz1234567890332123    <strong>' + re.test(test5).toString().toUpperCase()+'</strong></p>');
$('body').append('<p>aaaAaa#1    <strong>' + re.test(test4).toString().toUpperCase()+'</strong></p>');