如何使用Angularjs中具有多个错误的if条件来验证表单?

时间:2017-05-12 09:16:57

标签: javascript angularjs angular-validation

我有一个场景,我必须在点击提交按钮时验证表单,但我在使用if条件的函数中有一个包含多个错误消息的函数。我必须在登录按钮下方显示相应的错误消息。

HTML:

  <form name="frmSignIn">
         <div class="fginpt">
        <div class="input-group grpsdn">
   <div class="input-group-addon fginptg"><img src="images/rgemail.png" /> </div>
   <input type="text" name="email" class="form-control sgfrmcntr" ng-model="signinCtrlAs.email" placeholder="{{signinCtrlAs.EmailPlaceholder}}" ng-required="true" ng-keypress="signinCtrlAs.keyPress()" ng-blur="signinCtrlAs.emailCheck()"  ng-pattern="signinCtrlAs.emailRegexs" ng-class="{ 'eror' : frmSignIn.email.$invalid && frmSignIn.email.$touched}" />
    </div>
   <p  class="vlderr" ng-if="frmSignIn.email.$invalid && frmSignIn.email.$dirty">{{signinCtrlAs.errorEmailMsg }}</p>
    </div>
    <div class="fginpt">
     <div class="input-group grpsdn">
   <div class="fginptrd input-group-addon fginptg"><img src="images/rpswrd.png" /> </div>
    <input type="Password" name="password" class="form-control sgfrmcntr" ng-model="signinCtrlAs.password" placeholder="{{signinCtrlAs.PwdPlaceholder}}" ng-required="true"  ng-keypress="signinCtrlAs.PwdKeyPress()" ng-blur="signinCtrlAs.pwdCheck()"  ng-pattern="signinCtrlAs.pwdRegexs" ng-minlength="8" ng-maxlength="16" ng-class="{ 'eror' : frmSignIn.password.$invalid && frmSignIn.password.$touched}" >
    <div class="input-group-addon fginptg"><img src="images/hde-pswrd.png" /> </div>
       </div>
  <p class="vlderr" ng-if="frmSignIn.password.$invalid && frmSignIn.password.$dirty">{{signinCtrlAs.errorPwdMsg }}</p>
      </div>

    <div>
  <button   ng-disabled="frmSignIn.email.$invalid || frmSignIn.password.$invalid"  ng-class="{'sgninbtn':frmSignIn.$invalid, 'sgnbtnActv':frmSignIn.$valid}" novalidate  ng-submit="frmSignIn.$valid && signinCtrlAs.SignIn()" >Sign In</button>
    <p class="vlderr" ng-show="frmSignIn.$valid.$error.errMsg1">{{signinCtrlAs.errMsg1 }}</p>
<a href="/forgotpwd.html" class="sgnfpsw">I forgot password</a>
   </div>

  </form>

JS:

 vm.SignIn = function () {

    if ($scope.frmSignIn.$valid) {

        //SignIn Service Called


        signinSrvc.signInMember(vm.email, vm.password, function (response) {
          alert(response);
            if (response == 1)
                //vm.errMsg("", null, 'This is not a registered email', null, "bgWht", 'Password');
                vm.errMsg1 = "This is not a registered email";
            else if (response == 2)
                //vm.errMsg("", null, 'This is not a registered email', null, "bgWht", 'Password');
                vm.errMsg2 = "This is not a registered email";
            else if (response == 3) //or deleted
                //alert("Your account has been suspended. Please contact our helpdesk for further information");
                vm.errMsg3 = "Your account has been suspended. Please contact our helpdesk for further information";
                //vm.errMsg = false;
            else if (response == 4)
                //vm.errMsg("", null, 'Please sign in with your social network', null, "bgWht", 'Password');
                vm.errMsg4 = "Please sign in with your social network";
            else if (response == 5)
                //vm.errMsg("", null, 'Please sign in with your social network', null, "bgWht", 'Password');
                vm.errMsg5 = "Please sign in with your social network";
            else if (response == 6)
                //vm.errMsg(vm.Kpcls, vm.email, vm.EmailPlaceholder, null, "", 'Incorrect password - please try again');
                vm.errMsg6 = "Incorrect password";
            else if (isNaN(response)) {
                var loginType = $window.sessionStorage.getItem("loginType");
                if (loginType == "DT") {                        
                    getSessionSrvc.setLoginData(response);
                    $('#signinCmtPop').modal('hide');                       
                }
                else {
                    $window.sessionStorage.removeItem("loginType");
                    getSessionSrvc.setLoginData(response);
                    $window.location.href = "/dashboard.html";
                }
            }
        });

在这里,我必须根据响应显示错误消息,点击登录按钮。

0 个答案:

没有答案