2016-05-31 91 views
0

我有一个问题验证我的表单。这是一种改变注册用户的密码,个人资料图片和他的传记的形式。在这种形式下,密码不是首先要求的,但是当有人写下旧密码时,表格需要新密码和确认密码。我通过一个例子来展示它。如何根据另一个输入angularJS验证输入?

enter image description here

现在不是必需的,但如果我在旧密码输入写的东西,我需要新密码和确认密码变成红色。我的代码是:

<div class="form-group"> 
      <label for="oldpassword" class="cols-sm-2 control-label">Old Password</label> 
      <div class="cols-sm-10"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> 
        <input type="password" class="form-control" name="oldpassword" id="oldpassword" 
          placeholder="Enter your actual password" ng-model="oldPassword"/> 
       </div> 
      </div> 
     </div> 



     <div class="form-group"> 
      <label for="password" class="cols-sm-2 control-label">New Password</label> 
      <div class="cols-sm-10"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> 
        <input type="password" class="form-control" name="password" id="password" 
          placeholder="Enter your new password" 
          ng-model="newPassword" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" require-pass/> 
       </div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label> 
      <div class="cols-sm-10"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> 
        <input type="password" class="form-control" name="confirm" id="confirm" 
          placeholder="Confirm your new password" ng-model="confirm" require-pass confirm-directive 
          /> 
       </div> 
      </div> 
     </div> 

的需要通指令的作品,但只有当用户写的东西在新的密码输入或确认密码。 confirm-directive是一个指令,用于检查两个密码是否相等(该指令有效)。 要求通过指令是:

app.directive('requirePass', function() { 
return { 
    require: 'ngModel', 
    link: function (scope, element, attr, mCtrl) { 
     function myValidation(value) { 
      var oldPass = $('#oldpassword').val(); 
      console.log(oldPass); 
      if (oldPass!="") { 
       mCtrl.$setValidity('charE', false); 
      } else { 
       mCtrl.$setValidity('charE', true); 
      } 
      return value; 
     } 

     mCtrl.$parsers.push(myValidation); 
    } 
}}); 

谢谢你的帮助!

回答

1

您不需要另一个自定义指令。您只能使用ng-required。文档浏览:https://docs.angularjs.org/api/ng/directive/ngRequired

<input id="newPass" ng-required="oldPass" type="text" ng-model=... /> 
<input id="newPassConfirm" ng-required="oldPass" type="text" ng-model=... /> 

ng-required="oldPass"基本上说:“我需要这个字段填写,如果oldPass不为空。”

+0

哦,谢谢你! – Ary