57 regex email angularjs angularjs-directive ng-pattern
我试图使用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>
Sun*_*dan 61
如果要验证电子邮件,请使用type ="email"而不是type ="text"的输入.AngularJS具有开箱即用的电子邮件验证功能,因此无需使用ng-pattern.
以下是原始文档中的示例:
<script>
function Ctrl($scope) {
$scope.text = 'me@example.com';
}
</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指令,并且根据文档,错误消息可以显示如下:
如果ngModel.$ viewValue与RegExp不匹配,验证器将设置模式错误密钥
<script>
function Ctrl($scope) {
$scope.text = 'me@example.com';
$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>
Plunker:https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ ？ p = preview
scx*_*scx 51
有一个很好的例子可以解决内置验证器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>
van*_*102 10
根据@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>
小智 6
这是使用Regex Expression的jQuery Email Validation.如果您了解AngularJS,也可以对AngularJS使用相同的概念.
var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
来源.
| 归档时间： |
|
| 查看次数： |
186023 次 |
| 最近记录： |