Only allow certain characters to be entered in HTML textinput

I just need to allow a user to enter the following characters in the textinput:

a-zA-Z0-9!@#$%^*_|

<form action="http://www.cknuckles.com/cgi/echo.cgi" method="get" name="logOn">
  User Name:<br />
  <input type="text" name="userName" size="25" /><br />
  Password:<br />
  <input type="password" name="pw" size="25" /><br />
  <input type="submit" value="Log In" onClick="validate()"/> 
</form>

Above is my HTML, and Below is my JavaScript. I tried to use to validate it - but it still allows other characters.

document.logOn.onsubmit=validate;
    
function validate(){    
    var name=document.logOn.pw.value;
    if(!name = "[a-zA-Z0-9!@#$%^*_|]"){              
        alert("Your Password Cant Have any thing other than a-zA-Z0-9!@#$%^*_| - Play It Straight!");
        return false;
    }               
   
    return true;
}

But this isn't working. I can still put characters in ">", "<", and "{" etc.

Any Thoughts?

You can change your input text as below:

<input type="text" pattern="[a-zA-Z0-9!@#$%^*_|]{6,25}" />

So the code changes look like below:

    <form action="#" method="get">
       User Name:<br />
       <input type="text" pattern="[a-zA-Z0-9!@#$%^*_|]{6,25}" /><br />
       Password:<br />
       <input type="password" /><br />
       <input type="submit" value="Log In" /> 
   </form>

This will work without using JavaScript. pattern can be used instead. It is more effective than JavaScript for form validation.