如何处理多种语言的表单验证（特殊字符）：AngularJS？

Question

consider I have below form which I want to validate for multiple languages.

<form ng-submit="vm.transferCommunity()" name="transferCommunityForm">
<input type="text" class="form-control" name="transferCommunityLogin" ng-model="vm.transferCommunity.login" ng-pattern="/^[a-zA-Z0-9-_ ]+$/" >
<button type="submit" class="btn btn-default" ng-disabled="(transferCommunityForm.transferCommunityLogin.$invalid && !transferCommunityForm.transferCommunityLogin.$pristine)">Button</button>

<div ng-messages="transferCommunityForm.transferCommunityLogin.$error" ng-if="transferCommunityForm.transferCommunityLogin.$invalid">
  <div class="alert alert-danger" ng-message="pattern">Special Characters are not allowed</div>
</div>
</form>

The current pattern [ ng-pattern="/^[a-zA-Z0-9-_ ]+$/" ] by which I am validating my form. Its working fine for English language but for the languages like Japanese, Chinese, French, German , it displays error message.

for example word Reference in English when translated to french becomes Référence and it clearly contains special characters but its valid.

How to solve these problem??

Any help is appreciated !!!

Thanks

Answer 1

Instead of specifying all the correct values, you can specify all the wrong values.

Create a regular expression that will contain all the wrong characters.

For example: /[@!#$%^&*()\\-+={}\\[\\]|\\\\/'";:.,~№?<>]+/i .

This regular expression will look for all the wrong characters.

Since ng-pattern expects us to give a positive regular expression, we need to override the execution ng-pattern .

Live example on jsfiddle .

 angular.module('ExampleApp', []) .controller('ExampleController', function($scope) { $scope.myPt = { regExp: /[@!#$%^&*()\\-+={}\\[\\]|\\\\/'";:`.,~№?<>]+/i, test: function(val) { console.log(val); return !this.regExp.test(val); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController"> <form name="myForm"> <input ng-model="firstName" name="firstName" ng-pattern="myPt" required> <br>firstName = <pre>{{myForm.firstName.$error|json}}</pre> </form> </div> </div> 

PS Maybe I forgot some wrong symbols. If need be, you can simply expand the regular expression.