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

发布时间：2020-12-17 17:56:55 所属栏目：安全来源：网络整理

导读：我有一个带有密码和确认密码字段的表单,我想验证他们没有额外的按钮就得到了相同的值. 这是我的代码： input type="password" id="password" name="password" ng-model="password" placeholder='Password' ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.

我有一个带有密码和确认密码字段的表单,我想验证他们没有额外的按钮就得到了相同的值.

这是我的代码：

<input type="password" id="password" name="password" ng-model="password" placeholder='Password'
    ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{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-zd$@$!%*?&]{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>

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

enter image description here

我研究过：

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)系统仍显示它们匹配

enter image description here

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

解决方法

我用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>

第一步是为每个表单输入添加必需的.我有一些问题要激活它,我相信你也必须用/>结束你的输入字段;为了正常工作.这将阻止< button type =“submit”...在没有填充这些字段的情况下运行.必需属性将阻止使用浏览器提供的错误消息向大多数浏览器提交表单. 如果您希望在密码字段中包含符号/数字和大小写要求,可以添加ng-pattern =“/(？=.* [az])(？=.* [AZ])(？=.* [^ a-zA-Z])/“到您的第一个密码输入字段. 随后的范围< span ng-show =“！userForm.password.$error.required&& userForm.password.$error.pattern&& userForm.password.$dirty”>必须包含一个较低的&放大器;放大器;大写字母和一个非字母字符(数字或符号.)< / span>向用户显示PW字段要求这些参数有效的消息.

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

< span ng-show =“formData.password！= formData.confirmPassword”>下面的跨度;您的密码必须匹配.< / span>当原始密码无效时显示,I.E.不包含特殊字符或大写字母和/或不匹配.这里的美妙之处在于,即使两个密码匹配,但模式与原始模式不匹配,它们也都无效.

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

通过这样做我实现了这一点：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!