如何根据特定条件在 angularjs 中使用正则表达式添加密码验证?
How to add password validation using regular expression in angularjs according to certain criterion?
我想根据以下条件验证用户输入的密码:
密码长度至少为8个字符,包含一个数字、一个字符和一个特殊字符。
为此,我使用了以下正则表达式:
^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$
我在我的 angularjs 代码中尝试了这个表达式,如下所示:
<md-input-container class="md-block" style="margin-top:0px;">
<label>Password</label> <md-icon
md-svg-src="/images/icons/ic_lock_black_24px.svg" class="name"></md-icon>
<input type="password" ng-model="newUser.userPassword"
name="userPassword" required
ng-pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$">
<div
ng-messages="registerForm.userPassword.$error">
<div ng-message="pattern">Password should be atleast 8 characters long
and should contain one number,one character and one special
character</div>
<div ng-message="required">Password should be atleast 8 characters
long and should contain one number,one character and one special
character</div>
</div>
</md-input-container>
在我上面的代码中,当密码字段为空且焦点丢失时,会显示错误消息。如果用户输入的密码不符合我提到的条件,则不会显示错误消息。
我该如何解决这个问题?有人请帮助我。
据我了解你的问题。检查你的控制台它可能因词法错误而损坏。
您在 ng-pattern 的开始和结束时忘记了 slash
。
请使用ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/"
我创建了一个可能对您有帮助的插件。
https://plnkr.co/edit/qCjp6a?p=preview
几个笔记
1) 上面多了一个$
。应该是ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/"
2) 不要删除前导 ^
和尾随 $
,因为它会阻止输入空格
3) 如果你想在控制器中定义模式那么
$scope.passwordStrength = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
和 <input ng-pattern="passwordStrength">
但从来没有
$scope.passwordStrength = "/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/";
因为模式是 RegExp 对象,而不是字符串。
希望这能帮助您节省一些时间。
我用 Angular 的内置模式验证器对此进行了尝试,并能够提出以下检查:
- 长度至少为 8 个字符
- 小写字母
- 大写字母
数字特殊字符
password: [ '', [
Validators.required,
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}') ] ]
我要补充一点,我绝不是正则表达式专家。对于与 OP 密切相关的案例,这对我来说很简单。也许它会帮助别人。 Mozilla 的文档在解决这个问题上提供了很多帮助,特别是编写正则表达式模式部分。
您可以使用此正则表达式模式,它将正常工作:
"/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/".
但是你需要把它写在.ts
文件中(控制器class)因为如果你在.html
文件中写正则表达式作为'type'输入字段的 是 'password' 您将始终抛出错误“密码无效”。因为您正在编写一个正则表达式来检查字母数字和特殊字符输入,但由于输入字段的类型是密码,因此此正则表达式将检查加密的输入,这总是会失败。
我想根据以下条件验证用户输入的密码:
密码长度至少为8个字符,包含一个数字、一个字符和一个特殊字符。
为此,我使用了以下正则表达式:
^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$
我在我的 angularjs 代码中尝试了这个表达式,如下所示:
<md-input-container class="md-block" style="margin-top:0px;">
<label>Password</label> <md-icon
md-svg-src="/images/icons/ic_lock_black_24px.svg" class="name"></md-icon>
<input type="password" ng-model="newUser.userPassword"
name="userPassword" required
ng-pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$">
<div
ng-messages="registerForm.userPassword.$error">
<div ng-message="pattern">Password should be atleast 8 characters long
and should contain one number,one character and one special
character</div>
<div ng-message="required">Password should be atleast 8 characters
long and should contain one number,one character and one special
character</div>
</div>
</md-input-container>
在我上面的代码中,当密码字段为空且焦点丢失时,会显示错误消息。如果用户输入的密码不符合我提到的条件,则不会显示错误消息。
我该如何解决这个问题?有人请帮助我。
据我了解你的问题。检查你的控制台它可能因词法错误而损坏。
您在 ng-pattern 的开始和结束时忘记了 slash
。
请使用ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/"
我创建了一个可能对您有帮助的插件。 https://plnkr.co/edit/qCjp6a?p=preview
几个笔记
1) 上面多了一个$
。应该是ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/"
2) 不要删除前导 ^
和尾随 $
,因为它会阻止输入空格
3) 如果你想在控制器中定义模式那么
$scope.passwordStrength = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
和 <input ng-pattern="passwordStrength">
但从来没有
$scope.passwordStrength = "/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/";
因为模式是 RegExp 对象,而不是字符串。
希望这能帮助您节省一些时间。
我用 Angular 的内置模式验证器对此进行了尝试,并能够提出以下检查:
- 长度至少为 8 个字符
- 小写字母
- 大写字母
数字特殊字符
password: [ '', [ Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}') ] ]
我要补充一点,我绝不是正则表达式专家。对于与 OP 密切相关的案例,这对我来说很简单。也许它会帮助别人。 Mozilla 的文档在解决这个问题上提供了很多帮助,特别是编写正则表达式模式部分。
您可以使用此正则表达式模式,它将正常工作:
"/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/".
但是你需要把它写在.ts
文件中(控制器class)因为如果你在.html
文件中写正则表达式作为'type'输入字段的 是 'password' 您将始终抛出错误“密码无效”。因为您正在编写一个正则表达式来检查字母数字和特殊字符输入,但由于输入字段的类型是密码,因此此正则表达式将检查加密的输入,这总是会失败。