Question

在我的程序中，我在单击提交按钮时编写了电子邮件验证代码，它将调用验证功能，在那里我提供消息文本进行查看。当点击按钮时，问题是显示消息（必需和无效）。但我希望show首先需要在电子邮件格式验证后检查必填字段。如何显示第一个必填字段message.if必填字段输入我需要隐藏所需的字段消息，我需要显示无效消息。我试过下面的代码。

HTML

<div ng-app ng-controller="LoginController" novalidate>
<form name="login">
        <p>
                    <label for="email">Email</label>
                    <span> <input type="text" value="" ng-model="reg.email" size="40" id="email"
                        name="reg_email"  ng-required="true" ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"/>
                    </span>
                    <span ng-show="login.reg_email.$error.required"><p ng-show="errorMsgShow" class="red">{{requiredMsg}}</p></span>
                    <span ng-show="login.reg_email.$invalid"><p ng-show="errorMsgShow" class="red">{{invalidEmailMsg}}</p></span>
                </p>
        <button ng-click="validation()" >submit</button>
        </form>
</div>

脚本

function LoginController($scope) {
    $scope.validation = function(){
      $scope.requiredMsg="This question is required";
            $scope.invalidEmailMsg = "invalid Email";
            $scope.errorMsgShow = true;
        }
}

CSS

.red{
  color:#f20;
}

Fiddle

Answer 1

我已经编辑了你的代码，这很好用：

HTML

<div ng-app ng-controller="LoginController" novalidate>
<form name="login">

                    <label for="email">Email</label>
                    <span> <input type="text" ng-model="email" size="40" id="email"
                        name="reg_email"  ng-required="true" ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"/>
                    </span>
                    <span class="red" ng-show="login.reg_email.$dirty && login.reg_email.$error.required">This field is required</span>
                    <span class="red" ng-show="login.reg_email.$invalid && login.reg_email.$dirty">Invalid input</span>

        <button ng-click="validation()" >submit</button>
        </form>
</div>

JS：

function LoginController($scope) {


    $scope.validation = function(){
        console.log($scope.login.reg_email.$dirty)
            console.log($scope.login.reg_email.$error.required)
        }
}

Answer 2

使用＆＃39; $ error.pattern＆＃39;而不是＆＃39; $ invalid＆＃39;并使用＆＃39; Div＆＃39;而不是＆＃39; span＆＃39;显示错误消息。

HTML：

<div ng-app ng-controller="LoginController" novalidate>
  <form name="login">
    <p>
      <label for="email">Email</label>
      <span> <input type="text" ng-model="reg.email" size="40" id="email"
                        name="reg_email" ng-required="true" ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"/>
                    </span>
      <div ng-show="login.reg_email.$error.required">
        <p ng-show="errorMsgShow" class="red">{{requiredMsg}}</p>
      </div>
      <div ng-show="login.reg_email.$error.pattern">
        <p ng-show="errorMsgShow" class="red">{{invalidEmailMsg}}</p>
      </div>
    </p>
    <button ng-click="validation()">submit</button>
  </form>
</div>

Answer 3

我认为你必须改变条件，以及标签，请尝试这种方式。它可以为你工作

<div ng-app ng-controller="LoginController" novalidate>
<form name="login">
        <p>
                    <label for="email">Email</label>
                    <span> <input type="text" value="" ng-model="reg.email" size="40" id="email"
                        name="reg_email"  ng-required="true" ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"/>
                    </span>
                    <div ng-show="login.reg_email.$error.required && (login.reg_email.$invalid)"><p class="red">{{requiredMsg}}</p></div>
                    <div ng-show="login.reg_email.$invalid && (!login.reg_email.$error.required)"><p ng-show="errorMsgShow" class="red">{{invalidEmailMsg}}</p></div>
                </p>
        <button ng-click="validation()" >submit</button>
        </form>
</div>

如何控制如果需要消息可见然后不可见电子邮件无效消息？Angular js

3 个答案: