Question

我正在注册页面上工作。我的任务是验证手机号码是否存在，如果表单提交退出，则表示它应该抛出一个错误消息，如手机号码退出。它工作正常，但在显示错误消息后，一旦我清除该字段，错误消息就消失了。但是，当我开始输入新的手机号码时，它会再次显示错误消息，例如“Mobile No Exits”。在检查之前，只显示消息是如何避免这种情况的。请帮我找出解决方案。以下是我的代码。

Html代码，这里我使用ng-blur进行手机号码检查功能。

<div class="form-group col-xs-6">
    <input type="text" ng-model="user.MobileNo" placeholder="Mobile Number" 
    name="mobile" required ng-maxlength="10" maxlength="11" id="default1" 
    ng-blur="mobilenoCheckFun(user.MobileNo);">
   <span ng-show="!signupForm.mobile.$error.required  && show=='true'" 
   class="help-block">{{serverMessage1}}</span>
   </div>

控制器代码

$scope.mobilenoCheckFun=function(mobileno)
{
  $http.get("/ncrMobileCheck"+mobileno).success(function(result){
    console.log(result.length)
    if(result.length !=0)
    {

      $scope.show="true";
      $scope.serverMessage1="Mobile No Exits";
    }
    else
    {
       $scope.show="false";
       $scope.serverMessage1=" ";
    }
  })
}

修改 - 1

我正在编辑我的问题，因为我还需要帮助来验证同一email

中的form.字段

电子邮件验证的Html代码

<div class="form-group">
    <input type="email" ng-model="user.Email" placeholder="Email Id" name="email" required ng-change="emailIdCheck(user.Email)">
    <div ng-if="signupForm.email.$touched || signupSubmitted">
    <p ng-show="signupForm.email.$error.required" class="help-block">Email Id is Required</p>

控制器代码

$scope.emailIdCheck=function(emailid)
{
  $scope.serverMessage2="";
  $http.get("/ncrEmailIdCheck"+emailid).success(function(result19)
  {
    console.log(result19.length)
    if(result19.length !=0)
    {
      $scope.email="true";
      $scope.serverMessage2="Email Id Exits";
    }
    else
    {
       $scope.email="false";
      $scope.serverMessage2="";
    }
  })
}

Answer 1

这是live demo。

您的代码看起来有点乱，带有一些不需要的东西。检查我修改过的代码，并将其与您的代码进行比较。您正在使用http调用实时方案。就我而言，我已经完成了array示例的目的。它的行为与你的完全一样。以下是我对您的代码所做的更改。

ng-change代替ng-blur。
再创建一个方法 checkIfNumberExists ，以检查手机号码是否存在于database中（在我的情况下是It＆＃39; s阵列）。仅供参考，这个逻辑应存在于您的服务器上。
无需使用任何额外的变量$scope.show来显示错误消息，否则使用form span＆＃39; s { {1}}消息。请注意，我已从ng-show删除required。
在方法 mobilenoCheckFun 中，如果您不想显示任何消息而不是单个空格，请使用空白ng-show。

这就是全部。你足够聪明地理解剩下的代码。

<强> HTML

string

<强> AngularJS

<form ng-app="myApp" name="signupForm" ng-controller="MyCtrl">
  <div class="form-group col-xs-6">
    <input type="text" ng-model="user.MobileNo" placeholder="Mobile Number" 
    name="mobile" required ng-maxlength="10" maxlength="11" id="default1" 
    ng-change="mobilenoCheckFun(user.MobileNo);">
   <span ng-show="signupForm.mobile.$error">{{serverMessage1}}</span>
   </div>
</form>

如果有帮助，请告诉我们。

编辑-1

根据您的评论请求，我提供此更新。

Updated Live Demo

默认情况下， serverMessage1 为空，并检查 mobileno var app = angular.module("myApp", []); app.controller("MyCtrl", function($scope){ $scope.checkIfNumberExists = function(list, mobileno){ if(list.length != null && list.indexOf(mobileno) > -1) return true; else return false; } $scope.mobilenoCheckFun=function(mobileno) { //define an array to check If 'mobileno' exists, in your case this check happens at server side. but the logic is same. This list is fetched from DB in your case var list = ["8123791223", "8123791225", "8123791221", "8123791203"]; var result = $scope.checkIfNumberExists(list, mobileno); if(result) $scope.serverMessage1="Mobile Number Exits"; else $scope.serverMessage1=""; } });以跳过网络服务电话。当 mobileno length为10时，只会继续拨打网络服务电话。

length

编辑 - 2

您修改了自己的问题，并希望验证$scope.mobilenoCheckFun=function(mobileno) { //define an array to check If 'mobileno' exists, in your case this check happens at server side. but the logic is same. This list is fetched from DB in your case $scope.serverMessage1=""; if(mobileno.length != 10) return; var list = ["8123791223", "8123791225", "8123791221", "8123791203"]; var result = $scope.checkIfNumberExists(list, mobileno); if(result) $scope.serverMessage1="Mobile Number Exits"; else $scope.serverMessage1=""; }的{{1}}字段。以下是demo，它也会验证email。

＆＃13;

form

＆＃13;

email

＆＃13;

注意 - 根据您的需要，您可以更改//this method has been modified and is made common method for both the checks (mobile and email) $scope.checkIfExists = function(list, input){ if(list.length != null && list.indexOf(input) > -1) return true; else return false; } $scope.validateEmail = function(email) { var regEx = /\S+@\S+\.\S+/; return regEx.test(email); } $scope.emailIdCheck=function(emailid) { $scope.invalidEmailMsg = ""; $scope.serverMessage2 = ""; if(emailid.length == 0) return; //first check whether email id is valid or not var isEmailValid = $scope.validateEmail(emailid);// if(isEmailValid){ //if valid then make a service call to check whether it exists in database or not, in my case i'm checking it in array var emailList = ["mike.gimpe@gmail.com", "ben.gimpe@gmail.com", "georges.erard@hotmail.com", "viktor.damian@yahoo.com"]; var result = $scope.checkIfExists(emailList, emailid); if(result) $scope.serverMessage2="Email Id Exits"; else $scope.serverMessage2=""; }else{ //if it's not valid, do nothing, just show a message $scope.invalidEmailMsg = "Invalid Email Id"; return; } }以验证<div class="form-group col-xs-4"> <input type="text" ng-model="user.Email" placeholder="Email Id" name="email" required ng-change="emailIdCheck(user.Email);"> <span>{{invalidEmailMsg}}</span> <span ng-show="signupForm.email.$error">{{serverMessage2}}</span> <span ng-show="signupForm.email.$error.required" class="help-block">Email Id is Required</span> </div>字段。以下是link，其中提供了大量Regular Expression来验证email。

在没有页面重新加载

1 个答案: