Angularjs比较输入字段的值(密码和密码确认)

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>

这就是它的样子(我想,在我更改值时没有更新):

我研究过:

使用AngularJS比较表单验证中的两个输入值

Angularjs检查并比较两个输入字段值

但它看起来像我的情况下不起作用...我还研究了指令AngularJS比较密码字段,但我想使页面尽可能简单.

有什么建议吗？

更新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 &amp; 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>当原始密码无效时,显示下方的跨度,IE不包含特殊字符或大写字母和/或不匹配.这里的美妙之处在于,即使两个密码匹配,但模式与原始模式不匹配,它们也都无效.

最后一步是在表单无效时完全禁用提交按钮,这在此处完成:<button type="submit" id="create-user-button" ng-disabled="formData.password != formData.confirmPassword" ng-click="createUser()">Create User</button>.按钮字段中的ng-disable检查原始密码和密码确认是否匹配.我建议在包含disabled="disabled"由ng-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。它使您的代码清晰整洁