小编ade*_*ept的帖子

带有验证的密码字段和AngularJS中的"显示密码"选项

我正在尝试创建一个符合以下条件的密码字段:

  1. 有效密码长度应为6到24个符号,并且至少有一个数字.
  2. 当该字段包含无效密码时,它应始终具有.ng-invalid类.

为了使密码符号可见,我使用两个通过模型同步的输入:

<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>    
<label>
   Password:
    <input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />   
    <input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
    <span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span> 
</label>

<label>
    <input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password
</label>    
</form>
Run Code Online (Sandbox Code Playgroud)

请在此处查看完整代码:http://jsfiddle.net/adept/9uCGQ/44/.

在这里,我试图做以下事情:

  1. 我输入的密码无效.输入字段get.ng-无效类(红色边框).
  2. 我点击"显示密码".密码输入被隐藏,文本输入变得可见.

问题是在我更改它的值之前不会验证.如何在显示后立即进行验证?

UPD:在版本1.2.x及更高版本的AngularJS中,我的示例正常工作,该问题仅适用于较低版本.

javascript validation angularjs

4
推荐指数
1
解决办法
7150
查看次数

标签 统计

angularjs ×1

javascript ×1

validation ×1