Question

我收到了一个包含密码和确认密码字段的表单，我想验证他们在没有额外按钮的情况下获得了相同的值。

这是我的代码：

    <input type="password" id="password" name="password" ng-model="password" placeholder='Password'
    ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,20}/";
    ng-blur="focused4 = false" ng-focus="focused4 = true"
    ng-minlength="6" ng-maxlength="20" required>
    <span ng-show="focused4 && !regForm.password.$valid"><error>6 to 20 characters, one numeric digit, one upper case letter, one lower case letter and a special character</error></span>
</td>
<td align="left">
    <span ng-show="regForm.password.$valid"><valid>&#10004;</valid></span>
    <span ng-show="!regForm.password.$valid"><error>&#10060;</error></span>
</td>
</tr>
<tr>
<td align="left">
    <input type="password" id="passwordConfirm" name="passwordConfirm" ng-model="passwordConfirm" placeholder="Confirm Password" 
    ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,20}/";
    ng-blur="focused5 = false" ng-focus="focused5 = true"
    ng-minlength="6" ng-maxlength="20" required>
    <span ng-show="focused5 && !regForm.passwordConfirm.$valid" ><error>Passwords are not correct or don't match</error></span>
    <span ng-show="regForm.password.value != regForm.passwordConfirm.value"> NOT MATCHED </span>
    <span ng-show="regForm.password.value == regForm.passwordConfirm.value"> MATCHED </span>
</td>

这就是它的样子（我想，在我更改值时没有更新）：

我研究过：

Comparing two input values in a form validation with AngularJS

Angularjs check and compare two input field values

但它看起来像我的情况下不起作用的东西......我也研究了指令AngularJS compare password fields，但我想让页面尽可能简单。

有任何建议吗？

更新1

如果我将密码确认字段更改为：

<td align="left">
    <input type="password" id="passwordConfirm" name="passwordConfirm" ng-model="passwordConfirm" placeholder="Confirm Password" 
    ng-pattern="password";
    ng-blur="focused5 = false" ng-focus="focused5 = true"
    ng-minlength="6" ng-maxlength="20" required>
    <span ng-show="focused5 && !regForm.passwordConfirm.$valid" ><error>Passwords are not correct or don't match</error></span>
    <span ng-show="!regForm.passwordConfirm.$valid"> NOT MATCHED </span>
                        <span ng-show="regForm.passwordConfirm.$valid"> MATCHED </span>
</td>

那里有一个小虫子： 1）添加密码 2）添加确认密码==密码 3）删除密码 4）系统仍然显示匹配 5）添加无效的密码（如太短） 5）系统仍显示它们匹配

但是，对我来说没关系，因为密码验证通过后 - 确认再次显示错误，我无法保存价值。如果有更好的解决方案，请告诉我。

Answer 1

我使用AngularJS完成了客户端表单验证，如下所示：

<form name="userForm">
    <div class="form-group">
      <div>
        <input type="text" class="form-control" placeholder="Username" ng-model="formData.username" required />
      </div>
      <div>
        <input type="email" id="email" name="email" class="form-control" placeholder="Email Address" ng-model="formData.email" required />
      </div>
      <div>
        <input name="password" type="password" class="form-control" placeholder="Password" ng-model="formData.password" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required />
        <span ng-show="!userForm.password.$error.required &&  userForm.password.$error.pattern && userForm.password.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</span>
      </div>
      <div>
        <input name="confirm_password" type="password" class="form-control" placeholder="Confirm Password" ng-model="formData.confirmPassword" ng-pattern="formData.password" required />
        <span ng-show="formData.password != formData.confirmPassword">Your passwords must match.</span>
      </div>
      <div>
        <button type="submit" id="create-user-button" ng-disabled="formData.password != formData.confirmPassword" ng-click="createUser()">Create User</button>
      </div>
    </div>
  </form>

第一步是将required添加到每个表单输入中。我有一些问题需要激活它，我相信您还必须使用/>结束输入字段才能使其正常工作。这将阻止<button type="submit"...在没有填充这些字段的情况下运行。必需属性将阻止使用浏览器提供的错误消息向大多数浏览器提交表单。

如果您希望在密码字段中包含符号/数字和大写要求，可以将ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/"添加到您的第一个密码输入字段。

<span ng-show="!userForm.password.$error.required && userForm.password.$error.pattern && userForm.password.$dirty">Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</span>后面的范围向用户显示一条消息，即PW字段要求这些参数有效。

接下来，在密码确认输入字段中包含ng-pattern="formData.password"，这将验证该字段中键入的字符串是否与第一个密码字段中的字符串匹配。

当原始密码无效时，显示<span ng-show="formData.password != formData.confirmPassword">Your passwords must match.</span>下方的范围，I.E。不包含特殊字符或大写字母和/或不匹配。这里的美妙之处在于，即使两个密码匹配，但不与原始模式匹配，它们都不会有效。

最后一步是在表单无效时完全禁用提交按钮，这在此处完成：<button type="submit" id="create-user-button" ng-disabled="formData.password != formData.confirmPassword" ng-click="createUser()">Create User</button>。按钮字段中的ng-disable检查原始密码和密码确认是否匹配。我建议在包含由ng-disabled属性创建的属性disabled="disabled"时更改提交按钮的样式。

通过这样做我实现了这个目标：

#create-user-button:disabled,
#create-user-button[disabled]{
  border: 0;
  background-color: #cccccc;
  color: #666666;
}

我花了一整天的时间阅读有关编写指令和其他函数来处理这个逻辑后，今天完成了这个。当然，这只是一个客户端验证，以确保表单完整和密码匹配，但它工作得很好。

Answer 2

你可以试试这个

 <input type="password" id="password" name="password" ng-model="password"/>
 <input type="password" id="confirmpassword" name="confirmpassword" ng-model="confirmpassword" ng-pattern="password"/>

我认为你应该使用ng-message。它使您的代码清晰，干净

Answer 3

如何在插值中使用双向绑定？我使用的是角度6，但我认为这没有什么大的不同。

这是代码：

      pass
     <input type="password" id="password" [(ngModel)]="password" name="password" #passwordvalidityMsg="ngModel" >

      pass confirm
     <input type="password" id="confPass" pattern="{{password}}"  [(ngModel)]="confPass"  name="confPass" #confPassvalidityMsg="ngModel" >
      <div *ngIf="confPassvalidityMsg.invalid && (confPassvalidityMsg.dirty || confPassvalidityMsg.touched)" >
        <div *ngIf="confPassvalidityMsg.errors.pattern"> not the same</div>
      </div>

由于存在双向绑定，因此我可以获取password值并将其放在confPass pattern中，然后像检查其他任何错误一样检查模式。

这对我有用，但是，由于我是Angular新手，因此请告知是否存在问题。谢谢

Angularjs比较输入字段的值（密码和密码确认）

3 个答案: