写一个ng-pattern来禁止空格和特殊字符

Question

I am trying to get an angular ng-pattern to check that a username has no whitespaces or special characters. The following form return false if you enter whitespaces or special characters. However, it becomes true as soon as you enter az, Az or 0-9. I have tried ng-pattern="/[^\\s]+/" and \\S and [^ ] but they make no difference.

<form name="myform">
  valid? {{ myform.$valid }}
  <input type="text" name="username" ng-model="username" ng-pattern="/[a-zA-Z0-9^ ]/" required/>
</form>

Here's the form in a plunk: http://plnkr.co/edit/6T78kyUgXYfNAwB4RHKQ?p=preview

Answer 1

Try the following pattern:

/^[a-zA-Z0-9]*$/

This allows only alphanumeric characters.

Answer 2

To surface the specific answer I was looking for, I already had the pattern suggested by Sniffer /^[a-zA-Z0-9]*$/ , but angular still appeared to ignore leading/trailing whitespace. As Cristian mentions in the comments:

Angular will trim the input model, meaning that the validation doesn't trigger for spaces. You can add an ng-trim="false" to the input to fix this.

Note that Angular is trying to protect you by silently trimming whitespace by default. In my case, I want the user to be aware that the trailing whitespace is invalid.

Answer 3

in case anyone needs to disallow user entering emails in the address field

ng-pattern="/^[^@]+$/"

<div ng-messages="vm.updateCC.mailingAddress.$error" ng-show="vm.updateCC.mailingAddress.$touched">
     <p class="validation-message" ng-message="pattern">Please enter a valid address</p>
</div>