2017-08-09 190 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