Ng-patternディレクティブを使用して、angularJsの電子メールIDフィールドを検証しようとしています。
しかし、AngularJsは初めてです。ユーザーが間違ったメールIDを入力するとすぐにエラーメッセージを表示する必要があります。
私が下に持っているコードは解決しようとしています。適切な結果を得るためにng-patternを使用して助けてください。
<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
$scope.text = 'enter email';
$scope.Word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
</head>
<body>
<form name="myform" ng-controller="Ctrl">
<input type="text" ng-pattern="Word" name="email">
<span class="error" ng-show="myform.email.$error.pattern">
invalid email!
</span>
<input type="submit" value="submit">
</form>
</body>
電子メールを検証する場合は、type = "text"ではなくtype = "email"を使用して入力を使用します。 AngularJSにはすぐに使用できる電子メール検証があるため、これにng-patternを使用する必要はありません。
元のドキュメントの例を次に示します。
<script>
function Ctrl($scope) {
$scope.text = '[email protected]';
}
</script>
<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" required>
<br/>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>
<br>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>
詳細については、このドキュメントを参照してください: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
ライブの例: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info
UPD:
組み込みの電子メールバリデータに満足せず、カスタムRegExpパターン検証を使用する場合は、ng-patternディレクティブを適用し、 documentation に従ってエラーメッセージを次のように表示できます。
NgModel。$ viewValueがRegExpと一致しない場合、バリデーターはパターンエラーキーを設定します
<script>
function Ctrl($scope) {
$scope.text = '[email protected]';
$scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
<br/><br/>
<span class="error" ng-show="myForm.input.$error.required">
Required!
</span><br/>
<span class="error" ng-show="myForm.input.$error.pattern">
Not valid email!
</span>
<br><br>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>
組み込みバリデーターを修正するこの種の問題に対処する方法の良い例があります angulardocs 。より厳密な検証パターンのみを追加しました。
app.directive('validateEmail', function() {
var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
return {
require: 'ngModel',
restrict: '',
link: function(scope, Elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
if (ctrl && ctrl.$validators.email) {
// this will overwrite the default Angular email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
}
}
};
});
そして、単に追加する
<input type='email' validate-email name='email' id='email' ng-model='email' required>
@scxの答えによれば、GUIの検証を作成しました
app.directive('validateEmail', function() {
var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
return {
link: function(scope, Elm) {
Elm.on("keyup",function(){
var isMatchRegex = EMAIL_REGEXP.test(Elm.val());
if( isMatchRegex&& Elm.hasClass('warning') || Elm.val() == ''){
Elm.removeClass('warning');
}else if(isMatchRegex == false && !Elm.hasClass('warning')){
Elm.addClass('warning');
}
});
}
}
});
そして、単に追加します:
css
.warning{
border:1px solid red;
}
html
<input type='email' validate-email name='email' id='email' ng-model='email' required>
これは、正規表現を使用したjQuery電子メール検証です。 AngularJSのアイデアがある場合は、AngularJSにも同じ概念を使用できます。
var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
ソース 。
Ng-messagesを使用できます
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
モジュールを含める
angular.module("blank",['ngMessages']
hTMLで
<input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required>
<div ng-messages="myForm.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
以下は、電子メール検証の完全修飾パターンです。
<input type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" ng-model="emailid" name="emailid"/>
<div ng-message="pattern">Please enter valid email address</div>
現在、Angular 4にはメール検証機能が組み込まれています https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6https://github.com/angular/angular/pull/13709
emailをタグに追加するだけです。例えば
<form #f="ngForm">
<input type="email" ngModel name="email" required email>
<button [disabled]="!f.valid">Submit</button>
<p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
</form>
私のためにそれを動作させるために時間をかけてください。
要件:
[email protected]または[email protected]で終わるドメインを持つ電子メールの単一またはコンマ区切りリスト
コントローラ:
$scope.email = {
EMAIL_FORMAT: /^\w+([\.-]?\w+)*@(list.)?gmail.com+((\s*)+,(\s*)+\w+([\.-]?\w+)*@(list.)?gmail.com)*$/,
EMAIL_FORMAT_HELP: "format as '[email protected]' or comma separated '[email protected], [email protected]'"
};
HTML:
<ng-form name="emailModal">
<div class="form-group row mb-3">
<label for="to" class="col-sm-2 text-right col-form-label">
<span class="form-required">*</span>
To
</label>
<div class="col-sm-9">
<input class="form-control" id="to"
name="To"
ng-required="true"
ng-pattern="email.EMAIL_FORMAT"
placeholder="{{email.EMAIL_FORMAT_HELP}}"
ng-model="mail.to"/>
<small class="text-muted" ng-show="emailModal.To.$error.pattern">wrong</small>
</div>
</div>
</ng-form>
優れたオンライン正規表現テストツールが見つかりました。私の正規表現をテストでカバーしました:
私はそれがうまく働いている下の正規表現をウィットしようとしました。
メールの検証:\w +([-+。 ']\w +)@\w +([-。]\w +)。\ w +([-。]\w +)*
@Joannaの方法を試し、次のWebサイトでテストしましたが、機能しませんでした。
それから私はそれを修正し、それは働きました。
/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+
angularjsコントローラーの方法。メッセージ本文で1つ以上の電子メールを探すための単なる例です。
sp = $scope.messagebody; // email message body
if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+/)) {
console.log('Error. You are not allowed to have an email in the message body');
}
以下の正規表現を使用
^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+)+((\.)[a-z]{2,})+$
それが可能
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]