2017-08-09 143 views
0

我需要使用Angular.js验证模式和最大长度的密码字段,但在我的情况下,它不按预期工作。我在下面解释我的代码。角度验证无法正常工作

<form id="signupform" class="form-horizontal" role="form" name="signupform"> 
        <div class="form-group"> 
         <label for="email" class=" control-label col-sm-3">New password</label> 
         <div class="col-sm-9"> 
          <div ng-class="{ 'myError': signupform.password.$touched && signupform.password.$invalid }"> 
           <input type="password" class="form-control" name="password" placeholder="create your new password" ng-model="first_pass" ng-maxlength="20" ng-pattern="/^[a-zA-Z0-9]+$/"> 
          </div> 
         </div> 
        </div> 
        <div class="help-block" ng-messages="signupform.password.$error" ng-if="signupform.password.$touched"> 
         <p ng-message="maxlength" style="color:#F00;">This field is too long.The maximum length of your password should be 20.</p> 
         <p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p> 
        </div> 
        <div class="form-group"> 
         <label for="email" class=" control-label col-sm-3">Confirm password</label> 
         <div class="col-sm-9"> 
           <div ng-class="{ 'myError': signupform.password_confirmation.$touched && signupform.password_confirmation.$invalid }"> 
            <input type="password" class="form-control" name="password_confirmation" placeholder="confirm your new password" ng-model="second_pass" ng-maxlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/"> 
           </div> 
         </div> 
        </div> 
        <div class="help-block" ng-messages="signupform.password_confirmation.$error" ng-if="signupform.password_confirmation.$touched"> 
         <p ng-message="maxlength" style="color:#F00;">This field is too long.The maximum length of your password should be 20.</p> 
         <p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p> 
        </div> 
        <div class="form-group"> 
         <!-- Button -->         
         <div class=" col-sm-offset-3 col-sm-9"> 
          <button id="btn-signup" type="button" class="btn btn-success" ng-click="resetPass(signupform);">Submit</button> 
         </div> 
        </div>        
       </form> 

在这里,我需要密码字段应该采取at least one number and one character和最大长度应为20.在我的情况下,两个错误消息来任何情况下。

+0

因为密码字段验证了为什么我们需要再次验证它的条件,你应该使用在确认密码字段来验证确认密码和密码是否相同,如果不显示错误。 –

+0

什么是应用程序的角度版本? – Sajal

+0

我正在使用'ng-pattern =“/^[a-zA-Z0-9] + $ /”'实际上我的需要是密码应该至少有一个字母和字符的mandotary。 – satya

回答

0

可以分开以下两个消息有不同的条件:

`<p ng-message="maxlength" style="color:#F00;">This field is too long.The 
    maximum length of your password should be 20.</p> 

<p ng-message="pattern" style="color:#F00;">This field needs the format like at least one number,one letter.</p>

+0

验证完全不起作用。 – satya

+0

尝试用ng-show代替。 – db1912

+0

顺便说一句我解决了它。有包裹包括问题。 – satya