使用angularjs无法正常验证密码匹配 [英] Validating the password match using angularjs not working

问题描述

您好，我设计了一个包含姓名，密码，确认密码和电子邮件ID文本框的注册表单。我正在使用角度js进行客户端验证。名称，电子邮件和PAssowrd测试框按预期执行功能，我可以通过角度js进行客户端验证。但是在确认密码字段中，当我输入错误的密码时，角度js无法验证它。我不知道我的代码出了什么问题。我试过谷歌搜索解决方案，但没有得到正确的答案。请帮助我。提前谢谢了。这是我的代码



Login.html

 <   html  >  
 <   head  >  
 < span class =code-comment><！ -     CSS    - >   
 <  链接    rel   =  stylesheet    href   =  css / bootstrap.min.css    /  >  
 <   style  >  
 body {padding-top：30px; } 
 <   / style  >  
 
 <！ -     JS    - >   
 <   script     src   =  js / angular.js >  <   / script  >  
 <   script     src   =  js / app.js >  <   / script  >  
 <   / head  >  
 
 <   body     ng-app   =  myapp  >  
 <   div     class   = 容器 >  
 
  <！ -     PAGE HEADER    - >   
 <   div     class   =  page-header >  <   h1  >  AngularJS表单验证<   / h1  >  <   / div  >  
 
 <！ -    < span class =code-comment>如果表单有效或无效，则传入变量   - >   
 <  表格    name   =  userForm    ng-submit   =  submitForm（userForm。$ valid）    novalidate  >  
 
 
 
 <！ -  -     USERNAME    - >   
 <   div     class   =  form-group    ng-class   =  {'has-error'：userForm.Name。$ invalid&& ！userForm.Name。$ pristine} >  
 <  < span class =code-leadattribute> label  > 名称* <   / label  >  
 <  输入    type   =  text   名称  = 名称    class   =  form-control   占位符  = 您首选的用户名    ng-model   =  user.Name   必需    ng- minlength   =  2    ng-maxlength   =  25 >  
 <   p     ng-show   =  userForm.Name。$ error.minlength    class   =  help-block > 名称太短。<   / p  >  
 <   p     ng-show   =  userForm.Name。$ error.maxlength    class   =  help-block > 名称太长。<   / p  >  
 <   / div  >  
 
 
 
 <   div     class   =  form-group    ng- class   =  {'has-error'：userForm.password。$ invalid&& ！userForm.password。$ pristine} >  
 <  < span class =code-leadattribute> label     for   = 密码 > 密码<   / label  >  
 <  输入   类型  = 密码    id   = 密码    class   = 表单控件   名称  = 密码    ng-model   =  user.password    ng-minlength   =  8    ng-maxlength   =  20    ng-pattern   =  /（？=。* [az]）（？=。 * [AZ]）（？=。* [^ a-zA-Z]）/   必填      /  >  
 <   p     ng-show   =  userForm.password。$ error。必需&& userForm.password。$ dirty    class   =  help-block > 必填<   / p  >  
 <   p     ng- show   = ！userForm.password。$ error.required&& ！userForm.password。$ error.minlength&& ！userForm.password。$ error.maxlength&& userForm.password。$ error.pattern&& userForm.password。$ dirty    class   =  help-block > 必须包含一个较低的& amp; 大写字母和一个非字母字符（数字或符号）<   / p  >  
 <   p     ng-show   = ！userForm.password。$ error.required&& （userForm.password。$ error.minlength || userForm.password。$ error.maxlength）&& userForm.password。$ dirty    class   =  help-block > 密码必须介于8到20个字符之间。< span class =code-keyword><   / p  >  
 <   / div  >  
 
 <   div     class   =  form-group    ng-class   =  {'has-error'：userForm.password_c。$ invalid&& ！userForm.password_c。$ pristine} >  
 <  < span class =code-leadattribute> label     for   =  password_c > 确认密码<   / label  >  
 <   input    类型  = 密码    id   =  password_c    class   =  form-control    name   =  password_c    ng-model   =  user.password_c    valid-password-c    必需      /  >  
 <  < span class =code-leadattribute> p     ng-show   =  userForm.password_c。$ error.required&& userForm.password_c。$ dirty    class   =  help-block > 请确认您的密码。<   / p  >  
 <   p     ng-show   = ！userForm.password_c。$ error.required&& userForm.password_c。$ error.noMatch&& userForm.password。$ dirty    class   =  help-block > 密码与<   / p  >  
 <   / div  >  
 
 
 <！ -     EMAIL    - >   
 <   div     class   =  form-group    ng-class   =  {'has-error'：userForm.email。$ invalid& ;&安培; ！userForm.email。$ pristine} >  
 <  < span class =code-leadattribute> label  > 电子邮件* <   / label  >  
 <  输入    type   =  email   姓名  = 电子邮件    class   =  form-control   占位符  =  [e-mail]    ng-model   =  user.email < span class =code-attribute>   required  >  
 <   p     ng-show   =  userForm.email。$ invalid&& ！userForm.email。$ pristine    class   =  help-block > 输入有效的电子邮件。<   / p  >  
 <   / div  >  
 
 <  按钮   < span class =code-attribute> type   =  submit    class   =  btn btn-primary > 注册<   / button  >  
 
 <   / form  >  
 <   / div  >  
 <   / body  >  
 <   / html  >  

App.js

  var  app = angular.module（'  myapp'，['  UserValidation']）; 
 
 angular.module（'  UserValidation'，[]）。directive（ '  validPasswordC'，function（）{
 返回 {
 require：'  ngModel'，
 link： function（scope，elm，attrs，ctrl）{
 ctrl。$ parsers.unshift（function（viewValue，$ scope）{
  var  noMatch = viewValue！= scope.userForm.password。$ viewValue 
 ctrl。$ setValidity（'  noMatch'，！noMatch）
}）
} 
} 
}）

解决方案

< blockquote> valid） novalidate >



<！ - USERNAME - >
< div class = form-group ng-class = {'has-error'：userForm.Name。

无效&& ！userForm.Name。

pristine} >
< 标签 > 名称* < / label >
< 输入 类型 = text 名称 = 名称 class = 表格控制 p laceholder = 您的首选用户名 ng-model = user.Name 必需 ng-minlength = 2 ng-maxlength = 25 >
< p ng-show = userForm.Name。

Hi, I have designed a sign up form with name, password, confirm password, and e-mail id text boxes. i am doing client side validation using angular js. Name, E-mail and PAssowrd test box perform the function as expected and i am able to do client side validtion through angular js. But in the confirm password field when i enter a wrong password angular js fails to validate it. I do not know what went wrong with my code. I tried googling out solution but did not get proper answer for this. Kindly help me in this. Many thanks in advance. here is my code

Login.html

<html>
<head>
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        body     { padding-top:30px; }
    </style>

    <!-- JS -->
    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
</head>

<body ng-app="myapp">
<div class="container">

    <!-- PAGE HEADER -->
    <div class="page-header"><h1>AngularJS Form Validation</h1></div>

    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

        

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.Name.$invalid && !userForm.Name.$pristine }">
            <label>Name*</label>
            <input type="text" name="Name" class="form-control" placeholder="your preferred username" ng-model="user.Name" required ng-minlength="2" ng-maxlength="25">
            <p ng-show="userForm.Name.$error.minlength" class="help-block">Name is too short.</p>
            <p ng-show="userForm.Name.$error.maxlength" class="help-block">Name is too long.</p>
        </div>

        

        <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
        <label for="password">Password</label>
       <input type="password" id="password" class="form-control" name="password" ng-model="user.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required  />
       <p ng-show="userForm.password.$error.required && userForm.password.$dirty" class="help-block">Required</p>
       <p ng-show="!userForm.password.$error.required && !userForm.password.$error.minlength && !userForm.password.$error.maxlength && userForm.password.$error.pattern && userForm.password.$dirty" class="help-block">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol)</p>
       <p ng-show="!userForm.password.$error.required && (userForm.password.$error.minlength || userForm.password.$error.maxlength) && userForm.password.$dirty" class="help-block">Passwords must be between 8 and 20 characters.</p>
       </div>

       <div class="form-group" ng-class="{ 'has-error' : userForm.password_c.$invalid && !userForm.password_c.$pristine }">
       <label for="password_c">Confirm Password</label>
       <input type="password" id="password_c" class="form-control" name="password_c" ng-model="user.password_c" valid-password-c required  />
       <p ng-show="userForm.password_c.$error.required && userForm.password_c.$dirty" class="help-block">Please confirm your password.</p>
       <p ng-show="!userForm.password_c.$error.required && userForm.password_c.$error.noMatch && userForm.password.$dirty" class="help-block">Passwords do not match</p>
       </div>


        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
            <label>Email*</label>
            <input type="email" name="email" class="form-control" placeholder="[e-mail]" ng-model="user.email" required>
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>

        <button type="submit" class="btn btn-primary">Sign Up</button>

    </form>
</div>
</body>
</html>

App.js

var app = angular.module('myapp', ['UserValidation']);

angular.module('UserValidation', []).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.userForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
})

解决方案

valid)" novalidate> <!-- USERNAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.Name.

invalid && !userForm.Name.

pristine }"> <label>Name*</label> <input type="text" name="Name" class="form-control" placeholder="your preferred username" ng-model="user.Name" required ng-minlength="2" ng-maxlength="25"> <p ng-show="userForm.Name.

这篇关于使用angularjs无法正常验证密码匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！